【React-native】undefined is not an object (evalating '_this.props.navigation.navigate')答案

【问题标题】：【React-native】undefined is not an object (evaluating '_this.props.navigation.navigate')【React-native】undefined is not an object (evalating '_this.props.navigation.navigate')
【发布时间】：2019-04-20 17:42:16
【问题描述】：

我是 react-native 的新手。我使用 react-native-side-menu 创建一个抽屉，并在左侧添加一个底部以跳到另一个页面。当我按下底部时，出现了错误代码。但是，如果我把底部放在首页，它可以工作。为什么如果我把它放在抽屉里，它会崩溃？

这是路由栈应用.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';


import HomeScene from './homeScene';
import LoginScene from './loginScene';
import RegisterScene from './registerScene';
import TimetableScene from './timetable';
import ChatScene from './ChatScene';
import LeftMenu from './LeftMenu';


const SimpleApp = createStackNavigator({
    Login: {
      screen: LoginScene,
      navigationOptions: {  
          headerTitle: 'Login',  
      }
    },
    Home: {
      screen: HomeScene,
      navigationOptions: {  
          header: null, 
      }
    },
    Register: {
      screen: RegisterScene,
      navigationOptions: {  
          headerTitle: 'Register',  
      }
    },
    Timetable: {
      screen: TimetableScene,
      navigationOptions:{
          headerTitle: 'Timetable',
      }
    },

    //The page I want to skip

    Chat: {
      screen: ChatScene,
      navigationOptions:{
        headerTitle: 'Chat',
      }
    }

    LeftMenu:{
      screen: LeftMenu
    }

});
const AppContainer = createAppContainer(SimpleApp);

export default class App extends React.Component {
    render() {
        return <AppContainer />;
    }
}

LeftScene.js

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    SectionList
} from 'react-native';

export default class LeftMenu extends Component {
    constructor(props) {
        super(props);

        this.selectSideMenu = this.selectSideMenu.bind(this);
    }



    selectSideMenu() {
        this.props.onSelectMenuItem();
    }

    Chat = () => {
        const { navigate } = this.props.navigation;  
        navigate('Chat');  
    }
    render() {

        return (
            <View style={styles.container}>

                //The bottom to skip to "Chat" page but will respond error

                <TouchableOpacity
                    onPress={this.Chat}  
                    style={styles.button}>
                    <Text
                        style={styles.btText}>Chat</Text>
                </TouchableOpacity>


            </View>
        );
    }
}

我认为 LeftScene.js 中以下代码中的代码可能有误

Chat = () => {
        const { navigate } = this.props.navigation;  
        navigate('Chat');  
    }

this.props 只能从父组件获取值。 LeftMenu 的父组件是 homeScene，homeScene 没有导航所以不起作用。并且由于 App.js 是 homeScene 的父组件，所以如果我将跳过底部放在 homeScene 中它可以工作。 但我不知道怎么弄...

homeScene.js

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

let { width, height } = Dimensions.get('window');


import SideMenu from 'react-native-side-menu'
import Menu from './LeftMenu'

export default class LeftSideMenu extends Component {
    constructor(props) {
        super(props);

        this.state = {
            isOpen: false,
        }

        this.SelectMenuItemCallBack = this.SelectMenuItemCallBack.bind(this);
    }


    SelectMenuItemCallBack() {
        this.setState({
            isOpen: !this.state.isOpen,
        })
    }

    SelectToOpenLeftSideMenu() {
        this.setState({
            isOpen: true,
        })
    }

    Chat = () => {
        const { navigate } = this.props.navigation;
        navigate('Chat');
    }

    render() {

        const menu = <Menu onSelectMenuItem={this.SelectMenuItemCallBack} />;

        return (
            <SideMenu
                menu={menu}
                isOpen={this.state.isOpen}
                onChange={(isOpen) => {
                    this.setState({
                        isOpen: isOpen,
                    })
                }}
                menuPosition={'left'}
                openMenuOffset={0.75 * width}
                edgeHitWidth={200}

            >
                <View
                    style={styles.top}>
                    //The bottom to open the drawer
                    <TouchableOpacity
                        onPress={() => this.SelectToOpenLeftSideMenu()}
                        style={styles.Fbutton} >
                        <Text
                            style={styles.btText}>F</Text>
                    </TouchableOpacity>


                </View>

                //The bottom to skip to "Chat" page and works
                <View style={styles.container}>
                <TouchableOpacity
                        onPress={this.Chat}
                        style={styles.button}>
                        <Text
                            style={styles.btText}>Chat</Text>
                    </TouchableOpacity>
                </View>



            </SideMenu>

          );
    }
}

希望底部跳到“聊天”页面的homeScene可以放在抽屉里

【问题讨论】：

您的导航路线堆栈在哪里？能否请您在代码中也添加它！
发布您的 navigator.js 文件或包含用于导航的路由堆栈的文件。
谢谢提醒，我已经放了。 App.js

标签： javascript react-native react-native-navigation

【解决方案1】：

您正面临此错误，因为您的 LeftScene.js 不是堆栈的一部分，只需在 SimpleApp 中添加 LeftScene.js。

它会起作用的。

【讨论】：

【解决方案2】：

只需更改 homeScene.js 中的代码

const menu = <Menu onSelectMenuItem={this.SelectMenuItemCallBack} />;

到下面

const menu = <Menu onSelectMenuItem={this.SelectMenuItemCallBack} navigation={this.props.navigation} />;

【讨论】：