javascript - 如何在 native react 中将 stackNavigation 与抽屉导航一起使用并在 stackNavigation 组件中使用toggleDrawer()

Question

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

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

this.navigation.toggleDrawer() is not a function

// 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 组件 将与 navigation 相关的 Prop 注入(inject)到 stackNavigator 组件中。但是您的 RootStack 无法从抽屉导航器接收任何 Prop ，因为您用 React Component 包装了 RootStack 。这就是为什么它不能很好地工作。只需将导航组件导出为 RootStack 和 RootDrawer。

this.props.navigation: the navigation prop is passed in to every screen component (definition) in stack navigator (more about this later in "The navigation prop in depth").

The navigation prop passed down to a navigator only includes state, dispatch, and addListener. This is the current state of the navigator, and an event channel to send action requests.

Official document