先看個效果：
未命名.gif
demo結(jié)構(gòu):
image.png
Tab
利用react-navigation 2.0+ 的 createBottomTabNavigator創(chuàng)建
image.png
image.png
Nav
利用react-navigation 2.0+ 的 createStackNavigator創(chuàng)建
image.png
[圖片上傳中...(image.png-1e150-1537351456935-0)]
image.png
入口則設(shè)置
image.png
登錄界面需要添加一個參數(shù), 用于判斷返回的方式(dismiss(), goBack())叭莫。
image.png
我的界面不需要導(dǎo)航欄铁材，則需要添加一個參數(shù);
image.png
但二級界面可以使用
static navigationOptions = ({navigation})=>{
return {
header: null
}
};
關(guān)于設(shè)置導(dǎo)航欄的標(biāo)題，或是左右測的Item等功能叶撒，處于一級界面的（Tab包裹下的）需要自定義導(dǎo)航欄（由于react-navigation 2.0+中，設(shè)置 static navigationOptions = （{navigation}）=> { return { } }挤悉；失效的哨免，但二級界面可以使用摊腋。）
注意??： 有處Bug：二級界面設(shè)置無導(dǎo)航欄
及代碼：
componentDidMount() {
this.props.navigation.setParams({
isHiddenNavBar: true,
})
}
沒有效果，反而back不了哈雏，導(dǎo)航欄還存在楞件！正好在解決這個問題。裳瘪。履因。 哪位大佬有解決方案可以一同哦探討，謝謝??
解決方案盹愚，Nav修改代碼：
const navigationOptions = ({navigation})=>{
const options = {
headerBackTitle: null,
headerTintColor: '#fff', // 設(shè)置返回箭頭/返回文字的顏色
gesturesEnabled: true,
headerTitleStyle: { textAlign: 'center', flex: 1, fontSize: 20, fontWeight: 'bold'},
headerStyle: {
// 如果想去掉安卓導(dǎo)航條底部陰影可以添加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') {
// 自定義導(dǎo)航欄左側(cè)返回組件
_headerLeft = <NavItem
onPress={()=>navigation.state.params?navigation.dismiss():navigation.goBack()}
/>
}
return {
...options,
header: _header,
headerLeft: _headerLeft
};
};