javascript - React-Navigation 3:使用 createBottomTabNavigator 和 createStackNavigator 打开模式
问题描述
我知道以前有人问过这个问题,但只针对较旧版本的 react-navigation。从那以后,一些事情发生了变化。createBottomTabNavigator
使创建底部导航器的速度更快,并且该功能jumpToIndex()
不再存在。
我的问题是如何创建一个类似 Instagram 的底部选项卡,其中第一个、第二个、第四个和第五个导航按钮的作用类似于通常的选项卡导航器,而中间按钮 ( screen3
) 打开 modal screen3Modal
。
我已经在 react-navigation 3.xx 中尝试过,使用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 />;
}
}
此代码创建选项卡导航和模式导航。模式可以从另一个屏幕打开,但它不能在选项卡导航器中工作。我收到错误消息undefined is not an object (evaluating '_this.props.navigation')
解决方案
我找到了一个相对简单的解决方案:隐藏原始导航栏display:"none"
const TabNavigator = createBottomTabNavigator(
{
screen1: Screen1,
screen2: Screen2,
screen4: Screen4,
screen5: Screen5,
}, {
tabBarOptions: {
style: { display: "none", }
}
},
);
const StackNavigator = createStackNavigator(
{
Home: TabNavigator,
screen3: Screen3
}, {
mode: 'modal',
}
)
export default createAppContainer(StackNavigator);
并在每个屏幕上创建一个新的导航栏
<View style={{ flexDirection: "row", height: 50, justifyContent: "space-evenly", alignItems: "center", width: "100%" }}>
<TouchableOpacity onPress={() => this.props.navigation.navigate("screen1")}><Text>1</Text></TouchableOpacity>
<TouchableOpacity onPress={() => this.props.navigation.navigate("screen2")}><Text>2</Text></TouchableOpacity>
<TouchableOpacity onPress={() => this.props.navigation.navigate("screen3")}><Text>3</Text></TouchableOpacity>
<TouchableOpacity onPress={() => this.props.navigation.navigate("screen4")}><Text>4</Text></TouchableOpacity>
<TouchableOpacity onPress={() => this.props.navigation.navigate("screen5")}><Text>5</Text></TouchableOpacity>
</View>
推荐阅读
- javascript - D3 Web 地图:将光栅 PNG 与 TopoJSON 对齐
- html - 使用一个元素在它后面的元素中创建一个“窗口”
- php - WooCommerce 再次订购和用于价格计算的自定义商品数据
- node.js - PDFToolKit 正在发送奇怪的数据
- udp - 如何检测 UDP 流完成?
- c# - 如何为钩子使用参数化方法 - SpecFlow
- scala - 映射函数中的数组操作:Spark 1.6
- delphi - Delphi FMX TListBox 对于大型列表很慢
- python - 基于单词及其加权概率从矩阵生成文本语料库
- python - 我怎样才能让我的程序拒绝字母输入,只接受数字输入?