WebHU - Programozási kérdések és válaszok

Hogyan lehet navigálni az oldalakon? REAKCIÓ NÁTIV

Új vagyok a React native-ban. jelenleg itt ragadtam. próbálok létrehozni egy bejelentkezési alkalmazást, ahol a kezdőlapon lesz regisztráció. a regisztrációra kattintva át kell irányítani a regisztrációs oldalra.

az én app.js-em ilyen.

import LoginPage from './src/pages/LoginPage';
import SignupPage from './src/pages/SignupPage';
import { createStackNavigator } from 'react-navigation';
export default class App extends Component {
  render() {
    return (
      <RootStack/>
    );
  }
}
const RootStack = createStackNavigator({
  Login: { screen: LoginPage },
  Signup: { screen: SignupPage}  
},
{
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
initialRouteName: 'Login'
  }
 }
);

a bejelentkezési oldalam ilyen

export default class Login extends Component {
    render(){
        return(
            <View style = {styles.container}>
            <StatusBar
            backgroundColor="#8c8c8c"
            barStyle="light-content"
            />
            <Logo/>
            <LoginForm />
        </View>
    )
}
}

const {NavigationApp} = createStackNavigator({
signup: {screen: SignupPage}
})

a bejelentkezési űrlapom a következő:

export default class LoginForm extends Component {
    render(){

        return( 
        <View style={styles.container}>
        {/* <Image 
        source={require('../images/Et_cetera_ResizedLogo.png')} /> */}
        {/* <Text style={styles.logoText} >Et ceteraaaa</Text> */}
        <View style={styles.container}>
        <TextInput 
            style={styles.inputBox} 
            placeholder='Email'
            underlineColorAndroid='rgba(0,0,0,0)'
        />
        <TextInput 
            style={styles.inputBox} 
            placeholder='Password'
            secureTextEntry={true}
            underlineColorAndroid='rgba(0,0,0,0)'
        />
        <TouchableOpacity>
            <Text style={styles.buttonStyle}>
                Login
            </Text>
        </TouchableOpacity>
        <View style={styles.signup}>
            <TouchableOpacity>
                <Text style={styles.thirdPartyButtonStyle}>
                    Google
                </Text>
            </TouchableOpacity>

            <TouchableOpacity>
                <Text style={styles.thirdPartyButtonStyle}>
                    Facebook
                </Text>
            </TouchableOpacity>
        </View>
        </View> 
        <View style={styles.signup}>
            <Text style={styles.signupCont}>Don't have an account yet?</Text>
            <TouchableOpacity onPress={()=> this.props.navigate('signup')}>
            <Text 
                style={styles.signupButton}> Signup
            </Text>
            </TouchableOpacity>
        </View>

        </View>
    )
}
}

így most innen a loginformban a regisztrációra kattintva szeretnék navigálni a regisztrációs oldalra. hogyan tudom ezt megtenni? bármilyen javaslatot kérek.


Válaszok:


1

A react-native-router-flux használata nagyon hasznos a jelenetek közötti navigáláshoz

Hozzon létre egy route.js fájlt

import {Actions,Router,Stack,Scene} from 'react-native-router-flux';
import Landing from './Register';
import Login from './Login';

export default class Routes extends Component<{}> {

    render(){
        return(
          <Router backAndroidHandler={this.onBackPress}>
            <Stack key="root" hideNavBar={true}>
              <Scene key="landing" component={Login} title="Landing"  initial={true} back/>
              <Scene key="login" component={Register} title="Login"  back/>
            </Stack>
          </Router>
        )
    }

}

Ezután adja hozzá a műveleteket a bejelentkezési oldalon

import {Actions} from 'react-native-router-flux';

signup(){
Actions.signup();
}

export default class Login extends Component {
    render(){
        return(
            <View style = {styles.container}>
            <TouchableOpacity onPress={()=>signup()}>
        <Text>Click Me</Text>
        </TouchableOpacity>
        </View>
    )
}
}

export default class Register extends Component {
    render(){
        return(
            <View style = {styles.container}>

        <Text>Register Page</Text>

        </View>
    )
}
}
23.06.2018
Új anyagok

A rádiógomb ellenőrzött eseményének használata a jQueryben
Ebben a cikkben látni fogjuk, hogyan kell dolgozni a jquery választógombbal ellenőrzött eseményeivel. A választógombok HTML gombok, amelyek segítenek kiválasztani egyetlen értéket egy csoportból...

Körkörös függőségek megoldása terraformban adatforrásokkal – lépésről lépésre
Mi az a körkörös függőségek Dolgozzunk egy egyszerű eseten, amikor az SQS-sor és az S3-vödör közötti körkörös függőség problémája van egy egymástól függő címkeérték miatt. provider..

Miért érdemes elkezdeni a kódolást 2023-ban?
01100011 01101111 01100100 01100101 — beep boop beep boop Világunk folyamatosan fejlődik a technológia körül, és naponta fejlesztenek új technológiákat a valós problémák megoldására. Amint..

🎙 Random Noise #2  – Örökbefogadás és hit
az analitika íratlan világának gondozása Szeretné, hogy ezek a frissítések a postaládájába kerüljenek? Iratkozzon fel itt . "Ha önvezető autókat gyártanak, akkor mi miért ne..

A legrosszabb politika és prediktív modellek májátültetésre jelöltek számára az Egyesült Államokban
A máj (vagy óangolul lifer) az emberi test legnehezebb belső szervére utal, amely csendesen működik a nap 24 órájában. Mit csinál a máj? 500 feladatot hajt végre a szervezet egészségének..

5 webhely, amely 2022-ben fejleszti front-end fejlesztői készségeit
Frontendmentor.io A tényleges projektek létrehozásával a Frontendmentor.io segítséget nyújt a front-end kódolási képességeinek fejlesztésében. A kódolást azután kezdheti meg, hogy..

Mikor kell használni a Type-t az interfészhez képest a TypeScriptben?
A TypeScript a JavaScript gépelt szuperkészlete, amely statikus gépelést ad a nyelvhez. Ez megkönnyíti a robusztus és karbantartható kód írását azáltal, hogy a hibákat a fordítási időben..