Question

我已经创建了一个单独的路由文件，当我尝试使用stackNavigator在这些路由的帮助下通过react-navigation在屏幕之间导航时，我遇到了此错误，我已经尝试了Stack Overflow上可用的其他解决方案，但没有答案解决了我的问题，这是我的代码。

这是我的Route.js文件

import { createAppContainer, createStackNavigator } from 'react-navigation';
import Login from './screens/Login';
import Register from './screens/Register';
import Start from './screens/Start';

const AppNavigator = createStackNavigator({
    Home: {
        screen: Start,
      },
    LoginScreen: {
      screen: Login,
    },
    RegisterScreen: {
        screen: Register,
      },
  }, {
      initialRouteName: 'Home',
      navigationOptions: {
        header: null
    }
});
export default createAppContainer(AppNavigator);

这是我尝试导航的组件

 import React,{ Component } from 'react';
import { StyleSheet, View, KeyboardAvoidingView,Text } from 'react-native';
import NewButtons from './NewButtons';
import Logo from './Logo';

export default class Start extends Component{
    constructor () {
        super();
      }

      loginPress = () => {
        this.props.navigation.navigate('LoginScreen');
        } 
        registerPress = () => {
            this.props.navigation.navigate('RegisterScreen');
            } 
    render(){
        return(
           <KeyboardAvoidingView behavior='padding' style={styles.wrapper}>
                   <View style={styles.logoContainer}>
                        <Logo/>
                        <Text style={styles.mainHead}>Welcome to Food Zone</Text>
                        <Text style={{margin: 10, textAlign:'center'}}>Check out our menus, order food and make reservations{"\n"}{"\n"}</Text>
                        <NewButtons text="Login"
                        onPress={this.loginPress}/>
                        <NewButtons text="Register"
                        onPress={this.registerPress}/>
                    </View>
           </KeyboardAvoidingView>
        );
    }
}

const styles = StyleSheet.create({
    logoContainer: {
        alignItems: 'center',
    },
    mainHead: {
        fontFamily: 'PatuaOne',
        color: '#ff9900',
        fontSize: 28,
        marginTop: -50,
    },   
})

这在我的按钮组件中

import React,{ Component } from 'react';
import { StyleSheet, View,Dimensions } from 'react-native';
import { Button, Text } from 'native-base';

const {width:WIDTH} = Dimensions.get('window')
export default class NewButtons extends Component{
    constructor(props){
        super(props);
      }

      handlePress = () => {
        this.props.onPress(); 
      }
    render(){
        return(
            <View style={styles.ButtonContainer}>
                <Button light style={styles.mainButtons} onPress={this.handlePress()}>
                    <Text style={styles.textProps}>{this.props.text}</Text>
                </Button>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    textProps:{
        fontFamily: 'PatuaOne',
        color: '#ffffff',
    },
    mainButtons: {
        backgroundColor: "#ff9900",
        width: 250,
        margin: 5,
        color: '#ffffff',
        justifyContent: 'center',
        width: WIDTH -75,
        borderRadius: 10,
    },
    ButtonContainer: {
        alignItems: 'center',
    }
})

Answer 1

我设法通过在App.js文件中导入路由并在index.js中调用它来消除此错误，这是我的App.js文件代码。

import React, {Component} from "react";
import Routes from "./Routes";
const App = () => <Routes/>
export default App;

错误：未定义不是对象（正在评估'this.props.navigation.navigate'）

1 个答案: