首页 > javascript > React Navigation - 具有嵌套导航器的导航选项

React Navigation - 具有嵌套导航器的导航选项 (React Navigation - Navigation options with nested navigators)

问题

我还在学习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'它会说'this.props'。导航'未定义。

那么,理想的问题是,有没有办法从屏幕组件本身提供导航选项?不知何故?或者有没有办法我可以将这个导航选项放在导航器中,工作导航道具不会说它未定义?

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

非常感谢!

解决方法

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

在这里看到我的答案

问题

Im still learning React Native. I kinda know how React Navigation works. Now Im getting a little bit stuck with Navigation Nesting. Im gonna try to be quick.

First, whats the practical way to nest navigators?

I was doing it somehow using nesting, but came across with a problem. Im only able to change navigation options in the nested navigator not in the component screen. I have difficulties opening the drawer menu from one of the screens since Im using a custom header plus using nested navigators. I have a similar code Im using for testing:

App.js (Navigators)

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/>;
    }
}

Above code will launch SplashScreen which is good and has the following:

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>
        );
    }
}

In this screen navigation options work in the same code and its as expected. Everything cool for now, when I press the button and go to the next screen which is 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',
    },
});

Here is the problem, navigation options wont work here, so I was trying setting those lines in the navigator itself and it works if I configure header as null but if I want to control 'props.navigation' it will say 'this.props.navigation' is undefined.

So, ideal question would be, is there a way to make navigation options available from the screen component itself? somehow? or is there a way I can put this navigation options inside the navigator with working navigation props that wont say its undefined?

All this is because I want to customize my header

Thanks a lot!

解决方法

You need to use withNavigation to provide navigation prop there,

See my answer here

相似信息