[英]React Navigation - Navigation options with nested navigators
Im still learning React Native. 我还在学习React Native。 I kinda know how React Navigation works.
我有点知道React Navigation是如何工作的。 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.
自从Im使用自定义页眉以及嵌套导航器以来,我很难从其中一个屏幕打开抽屉菜单。 I have a similar code Im using for testing:
我有一个类似的代码Im用于测试:
App.js (Navigators) 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/>; } }
Above code will launch SplashScreen which is good and has the following: 上面的代码将启动SplashScreen,这很好,并且具有以下内容:
SplashScreen.js 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时,一切都变得很酷:
MainScreen.js 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. 这是问题所在,导航选项在这里不起作用,因此我尝试在导航器本身中设置这些行,并且如果将标头配置为null则可以工作,但是如果我想控制“ props.navigation”,它将显示“ this.props”。导航”未定义。
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! 非常感谢!
In SplashScreen.js
you are not navigating to the right screen 在
SplashScreen.js
您没有导航到右侧屏幕
you have to do 你必须做
go = () =>{
this.props.navigation.navigate('mainFlow');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.