react-navigation2.0 跨栈隐藏

最新推荐文章于 2024-09-23 17:51:35 发布

原创最新推荐文章于 2024-09-23 17:51:35 发布 · 276 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#navigationOptions

React Native 专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何在React Native中使用StackNavigator定义特定导航堆栈，并针对特定屏幕如BookDetailScreen隐藏底部标签栏。通过设置navigationOptions实现自定义导航选项，包括判断当前路由名称以决定是否隐藏tabBar。

参考:

https://www.jianshu.com/p/97cafea3ca38?utm_source=desktop&utm_medium=timeline

const RecordStack = createStackNavigator({
  RecordVC: {screen: RecordVC},
  BookDetailScreen: {screen: BookDetailScreen}
});

export const TabNavigator = createBottomTabNavigator({
  Home: { screen: HomeScreen},
  Book: { screen: BookStack},
  Mybook: {screen: MybookStack},
  Member: {screen: MemberStack},
  Record: {screen: RecordStack}
},

以上代码,我想点击Record标签时并进入到BookDetailScreen页面隐藏掉tab bar,之前很难处理是因为, BookDetailScreen已经在navigator stack里面,只能调navigator的options,现在定义如下:

RecordStack.navigationOptions= ({ navigation }) => {  
  let { routeName } = navigation.state.routes[navigation.state.index];  
  if(routeName=='BookDetailScreen'){  
      return {  
        tabBarVisible:false,  
      };  
  }  
};

这样建立某一个stack的专属navigationOptions,然后通过获取routeName获取页面,来改变属性

{ navigation }是上一层的navigation属性

所以上面写法可以获得tabBarVisible的属性值.

推理得出,原理分析:

BookVC: { screen: BookVC, navigationOptions:{header: null} }

这样写,其实就是:

BookVC.navigationOptions=({navigation})=>{}

获得的是navigator stack的navigation,所以效果就是无法修改 tabBarVisible