React Native中 react-navigation 2.0+的使用

先看个效果：

未命名.gif

demo结构:

image.png

Tab

利用react-navigation 2.0+ 的 createBottomTabNavigator创建

image.png

image.png

Nav

利用react-navigation 2.0+ 的 createStackNavigator创建

image.png

[图片上传中...(image.png-1e150-1537351456935-0)]

image.png

入口则设置

image.png

登录界面需要添加一个参数, 用于判断返回的方式(dismiss(), goBack())。

image.png

我的界面不需要导航栏，则需要添加一个参数;

image.png

但二级界面可以使用

static navigationOptions = ({navigation})=>{
  return {
     header: null
  }
};

关于设置导航栏的标题，或是左右测的Item等功能，处于一级界面的（Tab包裹下的）需要自定义导航栏（由于react-navigation 2.0+中，设置 static navigationOptions = （{navigation}）=> { return { } }；失效的，但二级界面可以使用。）

注意⚠️： 有处Bug：二级界面设置无导航栏
及代码：

 componentDidMount() {
    this.props.navigation.setParams({
       isHiddenNavBar: true,
    })
 }

没有效果，反而back不了，导航栏还存在！正好在解决这个问题。。。 哪位大佬有解决方案可以一同哦探讨，谢谢🙏

解决方案，Nav修改代码：

const navigationOptions = ({navigation})=>{
const options = {
  headerBackTitle: null,
  headerTintColor: '#fff', // 设置返回箭头/返回文字的颜色
  gesturesEnabled: true,
  headerTitleStyle: { textAlign: 'center', flex: 1, fontSize: 20, fontWeight: 'bold'},
  headerStyle: {
     // 如果想去掉安卓导航条底部阴影可以添加elevation: 0，
     // iOS下用shadowOpacity: 0。
     borderBottomWidth: 0,
     shadowOpacity: 0,
     elevation: 0,
     backgroundColor: '#ff2d55',
     paddingTop: Platform.OS === 'ios'? 0: StatusBar.currentHeight,
  },
};

const routes = navigation.state.routes;
const params = routes？navigation.state.routes[navigation.state.index].params : navigation.state.params;

let _header;
if (params !== undefined) {
   if (params.isHiddenNavBar === true) {
     _header = null;
   }
}

let _headerLeft;
if (navigation.state.routeName !== 'Tab') {
   // 自定义导航栏左侧返回组件
   _headerLeft = <NavItem
       onPress={()=>navigation.state.params?navigation.dismiss():navigation.goBack()}
  />
 }

return {
   ...options,
   header: _header,
   headerLeft: _headerLeft
 };
};