我正在从 react navigator 切换到 react-navigation,我实际上对这种方法很好,但在一个问题上苦苦挣扎。
我想使用抽屉导航和底部对齐的选项卡导航。这部分按预期工作 - 这里没有问题。
我希望使用 3 个按钮修复选项卡式导航,这些按钮将在整个应用程序中具有相同的操作。(例如仪表板/搜索/收藏夹)
从仪表板,您可以更深入地导航一个级别。正如我现在所做的那样,选项卡的标签以前“仪表板”更改为导航到项目的名称。
为了澄清,我在 Dashboard-Screen-Tab 中添加了一个堆栈导航,以便用户可以浏览这些页面。
在标签的堆栈中导航时,如何防止标签的标签和操作发生变化?基本上我想在每个屏幕上都有一个固定的标签导航。
我应该创建一个固定的视图组件来实现吗?
这是我的设置:App.js
const MetaTabNavigator = TabNavigator({
Dashboard: {
screen: MachineNavigator
},
Search: { screen: SearchScreen },
Favourites: { screen: FavouritesScreen },
},
{
tabBarPosition: Platform.OS === "ios" ? 'bottom' : 'top',
animationEnabled: true,
tabBarOptions: {
activeTintColor: STYLES.HIGHLIGHT_COLOR
},
swipeEnabled: false,
backBehavior: 'none'
});
const MetaDrawerNavigator = DrawerNavigator({
Home: {
screen: MetaTabNavigator,
navigationOptions: {
drawer: {
label: 'Drawer',
icon: ({ tintColor }) => <Icon name="rocket" size={24} />
},
},
}
},
{
contentComponent: props => <Menu {...props} />
}
);
AppRegistry.registerComponent('myApp', () => MetaDrawerNavigator);
机器导航器
const MachineNavigator = StackNavigator({
Main: {
screen: MachineOverview,
navigationOptions: ({ navigation }) => ({
title: "Dashboard",
headerLeft: (
<TouchableOpacity onPress={() => navigation.navigate("DrawerOpen")}>
<IOSIcon name="ios-menu" size={30} />
</TouchableOpacity>
),
headerStyle: { paddingRight: 10, paddingLeft: 10 }
})
},
Category: {
screen: Category,
navigationOptions: (props) => ({
title: "Kategorie",
})
},
ItemDetail: {
screen: ItemDetail,
navigationOptions: (props) => ({
title: "Video",
})
}
})
export default MachineNavigator;