之前的文章中提到过 Tab和Nav嵌套的问题
现在更新版本后仍然有问题,现作补充
1.嵌套使用的时候,无法设置NavBar的Title。右上角按钮设置方法如下
//使用方法请参考前面的文章
//设置TabBar的title,如果和NavBar混合使用,这个是必须的
MainBottomTabNav.navigationOptions = ({
navigation
}) => {
let {
routeName
} = navigation.state.routes[navigation.state.index];
let headerTitle = routeName;
let headerRight = null;
headerRight = (
<TouchableOpacity
style={{
width: 40,
height: 30,
alignItems: 'center',
justifyContent: 'center',
}}
activeOpacity={1}
onPress={() => {
navigation.navigate('Message');
}}
>
<Image
resizeMode="contain"
style={{ width: TranslateW(19), height: TranslateW(22) }}
source={require('../images/Work/tongzhi.png')}
/>
</TouchableOpacity>
);
return {
headerTitle,
headerRight
};
};
2.嵌套使用时候,安卓导航不居中问题。不用像以前一样修改源代码
//createStackNavigator 方法中添加默认属性
defaultNavigationOptions: {
headerStyle: { //隐藏底部阴影
backgroundColor: '#fff',
borderBottomWidth: 0,
shadowOpacity: 0,
elevation: 0,
},
headerBackTitle: null, //iOS返回按钮会有标题,null为隐藏
headerTitleStyle: {
fontSize: 18,
},
headerTitleContainerStyle: { //解决安卓不居中的问题
width: SCREEN_WIDTH,
justifyContent: 'center',
position: 'absolute',
top: 0,
left: 0,
},
headerBackImage: ( //修改返回默认返回图标
<Image
resizeMode="stretch"
style={{ marginLeft: 15, width: 12, height: 22, tintColor: '#fff' }}
source={require('../images/Common/back.png')}
/>
),
},
网友评论