Question

我试过摆弄大多数React Native路由/导航库，但到目前为止还没有任何工作。我的尝试是将登录屏幕作为主页面，您可以在其中按“注册”，它将引导您进入新的注册页面。有没有办法使用单个视图执行此操作，而不是将每个视图作为常量放在同一个文件中？

实施例： https://i.gyazo.com/4026fc7b8333e51f7bba2a79665b4a85.png

我想用React Navigate做的是：

登录

class LoginForm extends Component {
    const { navigate } = this.props.navigation;
    render() {
        static navigationOptions = {
            register: 'Register',
        };
        return (
            <View style={styles.container}>
                <StatusBar barStyle="light-content"/>
                <TextInput underlineColorAndroid="transparent" style = {styles.input} 
                    autoCapitalize="none" 
                    onSubmitEditing={() => this.passwordInput.focus()} 
                    autoCorrect={false} 
                    keyboardType='email-address' 
                    returnKeyType="next" 
                    placeholder='Email' 
                    placeholderTextColor='rgba(225,225,225,0.7)'/>
                <TextInput underlineColorAndroid="transparent" style = {styles.input}   
                    returnKeyType="go" ref={(input)=> this.passwordInput = input} 
                    placeholder='Password' 
                    placeholderTextColor='rgba(225,225,225,0.7)' 
                    secureTextEntry/>
                <View style = {styles.spacer} />           
                <TouchableOpacity style={styles.buttonContainer}>
                    <Text  style={styles.buttonText}>LOGIN</Text>
                </TouchableOpacity> 
                <TouchableOpacity style={styles.buttonContainer} onPress={()=>{this.navigate("register")}}>
                    <Text  style={styles.buttonText}>REGISTER</Text>
                </TouchableOpacity>              
            </View>
        );
    }
}

LoginForm的

export default class App extends Component {
    constructor() {
        super();
        this.state = {
            isReady: false
        };
    }

    async componentWillMount() {
        await Expo.Font.loadAsync({
            Roboto: require("native-base/Fonts/Roboto.ttf"),
            Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
            Ionicons: require("native-base/Fonts/Ionicons.ttf")
        });
        this.setState({ isReady: true });
    }

    render() {
        if (!this.state.isReady) {
            return <Expo.AppLoading />;
        }
        return <RootNavigator/>;
    }

    const App = StackNavigator({
        Login: { screen: Login},
        Register: { screen: Register},
    });    
}

App.js

{{1}}

虽然我不确定这是否可行。我一直在研究react-native-navigation-flux，尽管那里发生了同样的情况。世博会给出错误500并说服务器没有运行，或者说即使声明导航也不存在。

React Native Navigation onPress无法正常工作

0 个答案: