美文网首页
ReactNative中 React Navigation 嵌套

ReactNative中 React Navigation 嵌套

作者: Bana | 来源:发表于2018-08-22 16:39 被阅读48次
    1. TabNavigator中的页面是StackNavigator的是,点击Tab不能切换
      解决方案:使用 StackNavigator 中嵌套TabNavigator
    //设置底部栏 -- Tabbar
    const MainBottomTabNav = createBottomTabNavigator({
        首页: {
            screen: CustomTab1,
        },
        我的: {
            screen: CustomTab2,
        },
    }, {
        animationEnabled: false, // 切换页面时不显示动画
        tabBarPosition: 'bottom', // 显示在底端,android 默认是显示在页面顶端的
        swipeEnabled: false, // 禁止左右滑动
        backBehavior: 'none', // 按 back 键是否跳转到第一个 Tab, none 为不跳转
        tabBarOptions: {
            activeTintColor: '#008AC9', // 文字和图片选中颜色
            inactiveTintColor: '#999', // 文字和图片默认颜色
            showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
            indicatorStyle: {
                height: 0
            }, // android 中TabBar下面会显示一条线,高度设为 0 后就不显示线了
            style: {
                backgroundColor: '#fff', // TabBar 背景色
            },
            labelStyle: {
                fontSize: 12, // 文字大小
            },
        },
    });
    //设置TabBar的title,如果和NavBar混合使用,这个是必须的
    MainBottomTabNav.navigationOptions = ({
        navigation
    }) => {
        let {
            routeName
        } = navigation.state.routes[navigation.state.index];
    
        let headerTitle = routeName;
        return {
            headerTitle
        };
    };
    //设置顶部栏 -- NavBar
    const HomeNav = createStackNavigator({
        Home: {
            screen: MainBottomTabNav
        }
    });
    export default HomeNav;
    

    2.嵌套使用的时候,无法设置NavBar的Title
    解决方案:官网地址

    //设置TabBar的title,如果和NavBar混合使用,这个是必须的
    MainBottomTabNav.navigationOptions = ({
        navigation
    }) => {
        let {
            routeName
        } = navigation.state.routes[navigation.state.index];
    
        let headerTitle = routeName;
        return {
            headerTitle
        };
    };
    

    3.嵌套使用时候,安卓导航不居中问题
    解决方案:
    (1)不嵌套的页面,使用修改headTitleStyle

    static navigationOptions = { 
            headerTitleStyle:{
                flex: 1,
                textAlign: 'center',
            },
        }
    

    (2)嵌套页面中使用上面方法没有效果,需要修改

    node_modules/react-navigation/src/views/Header/Header.js
    

    中 _renderTitle 方法

      // { justifyContent: layoutPreset === 'center' ? 'center' : 'flex-start' },
    //修改为下面
          { justifyContent: layoutPreset === 'center' ? 'center' : 'center' },
    

    相关文章

      网友评论

          本文标题:ReactNative中 React Navigation 嵌套

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