反应导航错误 this.props.navigation.navigat [英] React Navigation Error this.props.navigation.navigat

问题描述

我有两个屏幕，我想单击以使用反应导航移动新屏幕.但我有一个错误

I have two screens and I want to on click to move new screen using react navigation. but I got an error

this.props.navigation.navigate

this.props.navigation.navigate

这是我的代码.任何人都知道什么是问题.我遵循每一步.

here is my code. anyone knows what is an issue. I follow every step.

    import React, {Component} from 'react';
    import { AppRegistry, View, Text,StyleSheet, TextInput, Image, ScrollView, Button, TouchableOpacity} from 'react-native';
    import { createStackNavigator, createAppContainer } from 'react-navigation';

    import SignUp from './SignUp';

    class Login extends  React.Component{

    constructor(props){
        super(props);
        this.state = { text: 'Useless Placeholder' };
    }
        render(){
    const {navigate} = this.props.navigation;
       return(
          <View>
              <ScrollView showsVerticalScrollIndicator={false}>
                <View style={styles.button}>
                         <TouchableOpacity>
                            <Text style={styles.buttonText}>SIGN IN</Text>
                          </TouchableOpacity>
                       </View>
                        <View style={styles.createAccount}>
                             <Text style={styles.createText}
                             onPress={() => this.props.navigation.navigate("Home")}
                             >Create new account</Text>
                        </View>
               </View>
            </ScrollView>
          </View>

       );
    }

}


module.exports = Login;


const MainNavigator = createStackNavigator({
  Home: {screen: SignUp}
});

export default createAppContainer(MainNavigator);

推荐答案

您的登录屏幕不是堆栈的一部分.

Your Login screen is not a part of your stack.

const MainNavigator = createStackNavigator({
  Home: {screen: SignUp}
});

只需制作一个单独的登录组件屏幕，将其添加到您的堆栈顶部，然后您就可以导航了.

Just make a separate component of Login screen add it on the top of your stack then you are able to navigate.

喜欢这个

const MainNavigator = createStackNavigator({
  Login:{screen:Login}
  Home: {screen: SignUp}
});

Login.js

import React, {Component} from 'react';
import { AppRegistry, View, Text,StyleSheet, TextInput, Image, ScrollView, Button, TouchableOpacity} from 'react-native';

    export default class Login extends  React.Component{
    constructor(props){
        super(props);
        this.state = { text: 'Useless Placeholder' };
    }
        render(){
    const {navigate} = this.props.navigation;
       return(
          <View>
              <ScrollView showsVerticalScrollIndicator={false}>
                <View style={styles.button}>
                         <TouchableOpacity>
                            <Text style={styles.buttonText}>SIGN IN</Text>
                          </TouchableOpacity>
                       </View>
                        <View style={styles.createAccount}>
                             <Text style={styles.createText}
                             onPress={() => this.props.navigation.navigate("Home")}
                             >Create new account</Text>
                        </View>
               </View>
            </ScrollView>
          </View>

       );
    }

MainNavigator.js

import React, {Component} from 'react';
    import { AppRegistry, View, Text,StyleSheet, TextInput, Image, ScrollView, Button, TouchableOpacity} from 'react-native';
    import { createStackNavigator, createAppContainer } from 'react-navigation';

import SignUp from './SignUp';
import Login from './Login'


const MainNavigator = createStackNavigator({
  Login: {screen:Login},
  Home: {screen: SignUp}
});

export default createAppContainer(MainNavigator);

这篇关于反应导航错误 this.props.navigation.navigat的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！