ReactNative 如何使用createBottomTabNavigator并实现界面传值/默认界面初始值 ( 附代码 )

本文链接：https://blog.csdn.net/j550341130/article/details/81220317

废话前言

createBottomTabNavigator 是用来创建底部导航栏的组件, 类似于Android的TabLayout+ViewPager的样式.

另外还有一个 createMaterialBottomTabNavigator 也可以实现此功能, 它提供了更好看的UI, 不过我自己试验后发现其切换tab时有两个问题: 一个是界面闪烁, 另一个是tabBar背景颜色变化动画会有卡顿, 所以暂时弃用.

github上存放了一份Demo:
https://github.com/YouCii/RNDemo

createBottomTabNavigator官方文档(更新延迟, 部分属性不可用, 很多问题我是在github上找到的)
https://reactnavigation.org/docs/en/bottom-tab-navigator.html

内部使用的react-native-vector-icons教程
https://blog.csdn.net/j550341130/article/details/81205701

如何创建底部导航栏

通过代码注释说明

export default createBottomTabNavigator({
        A: {
            screen: AScreen, // 对应跳转到的界面
            navigationOptions: {
                tabBarLabel: 'A', // tabBar显示的文字
                tabBarIcon: ({tintColor}) => ( // tabBar显示的图标
                    // 这里使用了react-native-vector-icons, 不熟悉的请看上方连接
                    <FontAwesome 
                        name={'wpforms'}
                        size={30}
                        color={tintColor}
                    />
                )
            }
        },
        B: {
            screen: BScreen,
            navigationOptions: {
                tabBarLabel: 'B',
                tabBarIcon: ({tintColor}) => (
                    <MaterialCommunityIcons
                        name={'face'}
                        size={30}
                        color={tintColor}
                    />
                )
            }
        }
    }, {
        initialRouteName: 'A', // 设置默认的页面

        lazy: true, // 是否在app打开的时候将底部标签栏全部加载
        backBehavior: null, // 点击返回退到上级界面

        tabBarOptions: {
            activeTintColor: Colors.active, // 选中时tab的label/icon的颜色
            inactiveTintColor: Colors.inactive, // 未选中的颜色

            showLabel: true,
            showIcon: true,
            style: { // 整体TabBar的样式
                backgroundColor: Colors.tabBar,
                height: 54,
            },
            tabStyle: { // TabBar内单独tab的样式
                height: 54,
            },
            labelStyle: { // TabBar内单独tab的文字样式
                fontSize: 12,
            },
        }
    },
);

如何点击tab时传值

A: {
    screen: AScreen,
    navigationOptions: ({navigation}) => ({ // 添加navigation参数
        tabBarLabel: 'A',
        tabBarOnPress: () => { // 使用tabBarOnPress点击事件
            route(navigation)
        }
    }),
},

/**
 * Tab点击跳转调用的公共方法
 */
const route = (navigation) => {
    if (!navigation.isFocused()) {
        // 路由方法, 动态跳转到对应界面
        navigation.navigate(navigation.state.routeName, {
            title: navigation.state.routeName
        })
    }
};

如何给默认tab传值

使用一条代码即可

initialRouteName: 'Net', // 设置默认的页面组件
initialRouteParams: {title: 'Net'}, // 找这条命令不容易, 翻github翻了一个小时

完整代码在此

https://github.com/YouCii/RNDemo/blob/master/src/js/screen/MainScreen.js