美文网首页
react-navigation(3.0.9) 问题

react-navigation(3.0.9) 问题

作者: Bana | 来源:发表于2019-03-05 15:02 被阅读0次

    之前的文章中提到过 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')}
                    />
                ),
            },
    

    相关文章

      网友评论

          本文标题:react-navigation(3.0.9) 问题

          本文链接:https://www.haomeiwen.com/subject/uuxouqtx.html