React Navigation 5.x BottomTab 使用

底部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 ();
    } 
    //...
 }