React Navigation 5.x BottomTab 使用

Posted 2021-06-24 菜鸟工程司

底部Tab导航

基本使用

导入

import { createBottomTabNavigator } from \'@react-navigation/bottom-tabs\';

使用方式和Stack类似

    const RootTab = createBottomTabNavigator();
    return (
        <RootTab.Navigator screenOptions={screenOptionss} tabBarOptions={tabBarOptions}>
            <RootTab.Screen  name="Home" component={HomeScreen} options={{ tabBarBadge: 3, title: "首页" }} 
            />
            <RootTab.Screen name="Settings" options={{ tabBarBadge: 3, title: "设置" }} component={Setting} />
        </RootTab.Navigator>
    )

• screenOptionss ,tabBarOptions 在这里可以对底部导航进行整体的一个属性控制

    const screenOptionss = ({ route }) => {
        return {
            tabBarIcon: ({ focused, color, size }) => {
                let img = require(\'./mine.png\')
                //根据组件名称加载不同的图片
                if (route.name == "Home") {
                    img = require(\'./mine.png\')
                } else {
                    img = require(\'./message.png\')
                }
                //可以返回任何组件
                return <Image source={img}
                    style={[style.icon, { tintColor: color }]} />
            },
        }
    }

    //文本选中和非选中颜色 不会影响icon
    const tabBarOptions = {
        activeTintColor: \'tomato\',
        inactiveTintColor: \'gray\',
    }

内嵌StackNavigator

一般tab都和stack结合使用，大多数从tab页跳转到其他页面需要隐藏tab底部栏，官方推荐tab嵌入到stack中

    return (
        <NavigationContainer>
            { 
            <Stack.Navigator screenOptions={{headerShown:true}}>
                <Stack.Screen name="Tab" component={HomeTab} options={{title:"首页"}}  />
                <Stack.Screen name="List" component={ListScreen} />
                <Stack.Screen name="Profile" component={ProfileScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    )

HomeTab

function HomeTab(params) {
    const RootTab = createBottomTabNavigator();
    //.... 
    return (
        <RootTab.Navigator screenOptions={screenOptionss} tabBarOptions={tabBarOptions}>
            <RootTab.Screen  name="Home" component={HomeScreen} options={{ tabBarBadge: 3, title: "首页" }} 
            />
            <RootTab.Screen name="Settings" options={{ tabBarBadge: 3, title: "设置" }} component={Setting} />
        </RootTab.Navigator>
    )
}

这样在HomeTab内嵌入stack中，所以在切换页面的时候还需要处理下导航栏（各个Tab页面共用的一个导航栏）
如下监听点击tab事件 改变标题 （这里使用dangerouslyGetParent()来获取stack的navigation）

class Setting extends Component {
   //...
    componentDidMount() {
        //监听点击tab事件 改变标题
        this.unsubscribe = this.props.navigation.addListener(\'tabPress\', e => {
            // Prevent default action
            this.props.navigation.dangerouslyGetParent().setOptions({title:"设置"})
          });
    }
    componentWillUnmount(){
        this.unsubscribe ();
    } 
    //...
 }