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

Question

我仍在学习反应本地。我有点知道反应导航是如何工作的。现在，我会被导航嵌套所困扰。我会尝试快速。

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

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

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.navigations.navigation"，它将说'.props.navigation'不确定。

因此，理想的问题是，有没有一种方法可以从屏幕组件本身中提供导航选项？不知何故？还是有一种方法可以将此导航选项放入导航器中，并没有说出其不确定的工作导航道具？

所有这些是因为我想自定义标题

非常感谢！

Answer 1

您需要使用withNavigation在那里提供导航道具，

请参阅我的答案

Answer 2

在SplashScreen.js中您没有导航到右屏幕

您必须做

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