我知道以前曾问过这个问题,但仅适用于旧版本的反应导航.从那以后,一些事情发生了变化. createBottomTabNavigator使创建底部导航器的速度大大提高,并且功能jumpToIndex()不再存在.
我的问题是如何创建类似于Instagram的底部选项卡,其中第一,第二,第四和第五个导航按钮的行为与通常的选项卡导航器相同,而中间按钮(screen3)将打开模态screen3Modal.
我已经在react-navigation 3.x.x中使用createBottomTabNavigator和createStackNavigator对其进行了尝试.
import React,{ Component,} from 'react';
import { createBottomTabNavigator,createStackNavigator,createAppContainer,} from 'react-navigation';
import { Screen1,Screen2,Screen3,Screen4,Screen5 } from './screens';
const TabNavigator = createBottomTabNavigator({
screen1: { screen: Screen1,},screen2: { screen: Screen2,screen3: {
screen: () => null,navigationOptions: () => ({
tabBarOnPress: () => this.props.navigation.navigate('screen3Modal')
})
},screen4: { screen: Screen4,screen5: { screen: Screen5,});
const StackNavigator = createStackNavigator({
Home: { screen: TabNavigator },screen3Modal: { screen: Screen3,{
initialRouteName: 'Home',});
const StackNavigatorContainer = createAppContainer(StackNavigator);
export default class App extends Component {
render() {
return <StackNavigatorContainer />;
}
}
此代码创建选项卡导航和模式导航.可以从另一个屏幕打开模态,但是在选项卡导航器中无法使用.我得到未定义的错误消息不是对象(正在评估“ _this.props.navigation”)
最佳答案
您可以将所有内容包装在同一个StackNavigator中,这样就可以轻松导航到其他路线.在这里,我将screen3作为默认路由传递,但是您可以将其更改为所需的任何值.
import React,screen3: { screen: () => null,//this.props.navigation.navigate('screen3Modal')
screen4: { screen: Screen4,{
initialRouteName: 'screen3Modal',});
const StackNavigatorContainer = createAppContainer(StackNavigator);
export default class App extends Component {
render() {
return <StackNavigatorContainer />;
}
}
