Question

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

所以现在从这里单击登录单击登录表单，我想导航到注册页面。我怎样才能做到这一点？请提出任何建议。

Answer 1

使用react-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>
    )
}
}

如何浏览页面？反应原生

1 个答案: