我还在学习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在那里提供导航道具,
看我的答案here
在SplashScreen.js
,你没有导航到正确的屏幕
你必须做
go = () =>{
this.props.navigation.navigate('mainFlow');
}