react-navigation2.0 跨栈隐藏

参考:

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