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道具不會從react-navigation傳遞到LeftMenu 。 嘗試將navigation傳遞給LeftMenu作為homeScene.js道具

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