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的父组件，因此，如果我将跳过底部放在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} />;

React-native-navigation如何在抽屉中添加跳格底部

1 个答案: