如何在本机反应中使用stackNavigation和drawerNavigation并在stackNavigation组件中使用toggleDrawer（）

Question

我在我的项目中使用 react-navigation。我想在抽屉导航中使用堆栈导航。我想在堆栈导航屏幕中使用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 />);
    }
}

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

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 包装组件并将 props 传递给它们。

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

this.props.navigation：navigation prop 被传入到 stack navigator 中的每个屏幕组件（定义）中（稍后将在“深入的导航 prop”中详细介绍）。

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

Official document