Реагирующая навигация - опции навигации с вложенными навигаторами

Question

Я все еще изучаю 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',
    },
});

Здесь проблема, параметры навигации здесь не работают, поэтому я пытался установить эти строки в самом навигаторе, и это работает, если я настраиваю заголовок как ноль, но если я хочу контролировать «props.navigation», он скажет «это» .props.navigation 'не определено.

Итак, идеальный вопрос: есть ли способ сделать опции навигации доступными из самого компонента экрана? каким-то образом? или есть способ, которым я могу поместить эти параметры навигации в навигатор с рабочими опорами навигации, которые не скажут, что он неопределен?

Все это потому, что я хочу настроить свой заголовок

Большое спасибо!

Answer 1

Вам необходимо использовать навигацию, чтобы обеспечить навигацию,

Смотрите мой ответ здесь

Answer 2

В SplashScreen.js вы не переходите к правому экрану

нужно сделать

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