Как перемещаться по страницам? РЕАГИРУЙТЕ НАРОДНОЕ - PullRequest
Новая
       16

Как перемещаться по страницам? РЕАГИРУЙТЕ НАРОДНОЕ

0 голосов
/ 23 июня 2018

Я новичок в React native.В настоящее время я застрял здесь.Я пытаюсь создать приложение для входа, где домашняя страница входа будет иметь регистрацию.при щелчке регистрации следует перенаправить на страницу регистрации.

мой app.js похож на это. 

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'
  }
 }
);

моя страница входа выглядит так 

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}
})

Моя форма входа в систему выглядит следующим образом: 

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>
    )
}
}

, поэтому теперь, когда вы входите в форму входа в систему при нажатии на кнопку регистрации, я хочу перейти на страницу регистрации.Как я могу это сделать?любые предложения, пожалуйста.

1 Ответ

0 голосов
/ 23 июня 2018

Используйте response-native-router-flux, это весьма полезно для навигации между сценами

Создать файл route.js 

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>
        )
    }

}

Затем добавьте действия на странице входа в систему 

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>
    )
}
}
...