React-native：未定义不是 object（正在计算 'this.props.navigation'）

Question

很乐意使用您的帮助。我在 react-native 中弄乱了 stack-navigator 但我现在已经被标题中提到的错误困住了一段时间。我尽可能地编写了最基本的代码，但仍然无法找出错误。我想这与 this.props 的可访问性有关，但我还不明白..

代码如下：

App.js

import React, {Component} from 'react';
import {AppRegistry,Animated,DeviceEventEmitter,Text,View,StyleSheet,TouchableHighlight,TouchableOpacity,TextInput,Button,Image,Dimensions} from 'react-native';
import {StackNavigator} from '/Users/amitnelinger/Desktop/MobileProjects/newProj/node_modules/react-navigation'




const App = (props) => {
    return(
     const { navigate } = props.navigation;
     <View>
                <Button 
                    onPress={() => navigate('song')} 
                    title = "MotherFucker Jones"
                />  

      </View>
    );
 }

App.navigationOptions = {
    title: 'Home screen',
};

export default App

index.ios.js

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

import App from '/Users/amitnelinger/Desktop/MobileProjects/newProj/app/components/App.js'
import song from '/Users/amitnelinger/Desktop/MobileProjects/newProj/app/components/song.js'
import {StackNavigator} from '/Users/amitnelinger/Desktop/MobileProjects/newProj/node_modules/react-navigation'

export default class newProj extends Component{

    render(){
        const { navigation } = this.props;

        return(
            <App navigation = { navigation } />
        );
    }
}

const simpleApp = StackNavigator({
    Home: {screen: App},
    song: {screen: song}
});

AppRegistry.registerComponent('newProj',() => newProj)

Answer 1

在我看来你没有正确调用导航。更改导航的完整道具是'this.props.navigation.navigate('song')。试试这个调整

Answer 2

您没有使用 StackNavigator，您只是传递了一个未定义的导航道具。用您的 StackNavigator 替换应用程序，它应该可以解决您的问题：

export default class newProj extends Component{

    render(){    
        return(
            <simpleApp />
        );
    }
}

const simpleApp = StackNavigator({
    Home: {screen: App},
    song: {screen: song}
});

React-native：未定义不是 object（正在计算 'this.props.navigation'）

React-native: Undefined is not an object (evaluating 'this.props.navigation')

navigation

react-native

stack-navigator