React-native-navigation如何将抽头底部添加到抽屉

Question

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

错误消息未定义不是对象（评估'_this.props.navigation.navigate'）

这是路由堆栈App.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的父组件，所以如果我将skip Bott放在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上的“聊天”页面可以放在抽屉里

Answer 1

我可以看到你的homeScene.js已经进口了LeftMenu，因此navigation道具将不会从LeftMenu进入react-navigation。尝试将navigation传递给LeftMenu作为homeScene.js的道具

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