代码之家 › 专栏 › 技术社区 › gangrelg

反应导航-带有嵌套导航器的导航选项

react-navigation react-native reactjs javascript

gangrelg · 技术社区 · 6 年前

我还在学英语。我知道导航是怎么工作的。现在我有点被导航嵌套卡住了。我要尽量快点。

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

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,它是好的,并且具有以下特性:

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.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',
    },
});

问题是,导航选项在这里不起作用,所以我试着在导航器中设置这些行,如果我将header配置为null,它就会起作用,但是如果我想控制props.navigation'它会说'this.props.navigation'未定义。

谢谢!

1 回复 | 直到 6 年前

Jaydeep Galani 6 年前

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

看看我的答案 here

Vinil Prabhu 6 年前

在 SplashScreen.js

你必须这么做

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