React Navigation - 带有嵌套导航器的导航选项答案

【问题标题】：React Navigation - Navigation options with nested navigatorsReact Navigation - 带有嵌套导航器的导航选项
【发布时间】：2019-07-28 21:17:15
【问题描述】：

我还在学习 React Native。我有点知道 React Navigation 是如何工作的。现在我有点卡在导航嵌套上。我会尽量快点。

首先，嵌套导航器的实用方法是什么？

我以某种方式使用嵌套来做到这一点，但遇到了一个问题。我只能在嵌套导航器中更改导航选项，而不是在组件屏幕中。由于我使用自定义标题加上嵌套导航器，因此我很难从其中一个屏幕打开抽屉菜单。我有一个类似的代码用于测试：

App.js（导航器）

import React, { Component } from 'react';
import { createStackNavigator, createDrawerNavigator, createBottomTabNavigator, createAppContainer } from 'react-navigation';
import SplashScreen from './SplashScreen';
import MainScreen from './MainScreen';
import FirstTabScreen from './FirstTabScreen';
import SecondTabScreen from './SecondTabScreen';

const AppStackNavigator = createStackNavigator({
    splash: {
        screen: SplashScreen
    },
    mainFlow: {
        screen: createDrawerNavigator({
            main: {
                screen: MainScreen
            },
            someTab: {
                screen: createBottomTabNavigator({
                    firstTab: {
                        screen: FirstTabScreen
                    },
                    secondTab: {
                        screen: SecondTabScreen
                    }
                })
            }
        })
    }
});

const AppContainer = createAppContainer(AppStackNavigator);


export default class App extends Component{

    render(){
        return <AppContainer/>;
    }
}

上面的代码将启动 SplashScreen，它很好并且具有以下内容：

SplashScreen.js

import React, { Component } from 'react';
import { Button, View } from 'react-native';

export default class SplashScreen extends Component {

    static navigationOptions = {
        header: null
    }

    go = () =>{
        this.props.navigation.navigate('main');
    }

    render() {
        return (
            <View>
                <Button title='GO NEXT SCREEN' onPress={this.go}/>
            </View>
        );
    }
}

在此屏幕中，导航选项使用相同的代码并按预期工作。现在一切都很酷，当我按下按钮并转到下一个屏幕时，即 MainScreen：

MainScreen.js

import React, { Component } from 'react';
import { Text, StyleSheet, Button, View } from 'react-native';

export default class MainScreen extends Component {

    static navigationOptions = {
        header: null
    }

    drawer = () => {
        this.props.navigation.openDrawer();
    }

    render() {
        return (
            <View>
                <Text style={styles.baseText}>HELLO</Text>
                <Button title='DRAWER' onPress={this.drawer}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    baseText: {
        fontFamily: 'Cochin',
    },
    titleText: {
        fontSize: 20,
        fontWeight: 'bold',
    },
});

这就是问题所在，导航选项在这里不起作用，所以我尝试在导航器本身中设置这些行，如果我将标题配置为 null 但如果我想控制“props.navigation”它会说“这个.props.navigation' 未定义。

所以，理想的问题是，有没有办法让屏幕组件本身的导航选项可用？不知何故？或者有没有办法可以将此导航选项放在导航器中，并使用不会说未定义的工作导航道具？

这一切都是因为我想自定义我的标题

非常感谢！

【问题讨论】：

标签： javascript reactjs react-native react-navigation

【解决方案1】：

你需要使用 withNavigation 来提供导航道具，

看我的回答here

【讨论】：

这就是答案。以防万一，有人遇到同样的问题。我在导航器代码中编写了导航选项。我创建了一个自定义 headerLeft 按钮，并在其代码中编写了一个“导出默认 withNavigation”。现在，当您从 headerLeft 属性调用自定义按钮时，它将正确使用导航道具。

【解决方案2】：

在SplashScreen.js 中，您没有导航到正确的屏幕

你必须这样做

go = () =>{
        this.props.navigation.navigate('mainFlow');
    }

【讨论】：