如何在React Native中将stackNavigation与抽屉式Navigation一起使用，以及如何在stackNavigation组件中使用toggleDrawer（）

Question

我在项目中使用了反应导航。 我想在抽屉式导航中使用堆栈导航。 我想在堆栈导航屏幕中使用this.navigation.toggleDrawer() ，但不要在堆栈导航屏幕中附加此内容。

// drawer-navigation.js

import React, { Component } from 'react';
import { DrawerNavigator } from 'react-navigation';
import StackNavigation from './stack-navigation';
import Screen1 from '../screens/screen1'

const RootDrawer = DrawerNavigator({
    Home: {
        screen: StackNavigation,
    },
    screen1: Screen1

},{
    // set default screen
    initialRouteName: 'Home',
    drawerPosition: 'right'
})

export default class DrawerNavigation extends Component {
    render() {
        return (<RootDrawer />);
    }
}

// stack-navigations

import React from 'react';
import { StackNavigator } from 'react-navigation';
import Home from '../screens/home';

const RootStack = StackNavigator({
    Home: {
        screen: Home,

        navigationOptions:{
            header: null
        }
    }
},{
    // set default screen
    initialRouteName: 'Home',

    // defualt style for navigation bar
    navigationOptions: {
        headerStyle: {
            backgroundColor: '#F55656',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            fontWeight: 'bold',
        },
    },      
})


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

这是我的Home组件，我想在HomeSearch组件中添加一个按钮，单击该按钮会打开我的抽屉，但这会给我以下错误：

this.navigation.toggleDrawer（）不是函数

// home.js (target screen)

import React, { Component } from 'react';
import { View, StyleSheet, StatusBar } from 'react-native';
import SplashScreen from 'react-native-smart-splash-screen';

import Header from '../components/header';
import HomeSearch from '../components/homeSearch';

class Home extends Component {
    constructor(props){
        super(props);

    }


    componentDidMount(){
        // control splash screen
        SplashScreen.close({
            animationType: SplashScreen.animationType.scale,
            duration: 1500,
            delay: 1200,
        })
    }

    render() {
        return (
            <View style={styles.container}>
                <StatusBar 
                    barStyle="light-content"
                    animated={true}
                    backgroundColor='#F55656'
                />
                <Header/>
                <HomeSearch onPress={this.navigation.toggleDrawer()}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex:1,
        backgroundColor: 'rgba(236, 235, 231, 0.35)',

    }
})

export default Home;

Answer 1

解

这是导出ReactNavigation组件的错误方法。

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

正确的路。

export default RootStack;

您的RootDrawer将使用相同的方式。 并使用onPress=this.props.navigation.toggleDrawer 。

为什么

createStackNavigation和createDrawerNavigation包装组件并将道具传递给它们。

在您的情况下， drawerNavigator component将与navigation相关的props注入到您的stackNavigator组件。 但是您的RootStack无法从抽屉RootStack器接收任何道具，因为您用React Component包装了RootStack 。 这就是为什么它不能很好地工作的原因。 只需将您的导航组件导出为RootStack和RootDrawer 。

this.props.navigation：将导航道具传递到堆栈导航器中的每个屏幕组件（定义）（有关更多信息，请参阅“深入的导航道具”）。

向下传递到导航器的导航道具仅包括状态，调度和addListener。 这是导航器的当前状态，是用于发送动作请求的事件通道。

官方文件