先看个效果：
未命名.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
};
};