使用@react-navigation来实现导航。

Install

1. 安装libs

npm i @react-navigation/native react-native-screens react-native-safe-area-context @react-navigation/bottom-tabs

2. 安装pods

npx pod-install ios

3. 适配Android

打开MainActivity.java，引入：

import android.os.Bundle;

添加方法：

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(null);
}

Usage

1. 在App.tsx文件中将<NavigationContainer>作为最外层组件引入：

export const App: FunctionComponent = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                {...}
                // <Stack.Screen name="Home" component={HomeScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    );
};

2. 使用@react-navigation/bottom-tabs来实现底部导航。

const Tab = createBottomTabNavigator();

const options = {
    // 实现背景色透明
    tabBarStyle: {
        backgroundColor: 'transparent',
        borderTopColor: 'transparent',
        position: 'absolute',
    },
} as BottomTabNavigationOptions;

export const BottomTabs: FunctionComponent = () => {
    return (
        <Tab.Navigator tabBar={BottomTabBarItem} screenOptions={options}>
            {...}
            // <Tab.Screen name="Home" component={HomeScreen} />
        </Tab.Navigator>
    );
};

3. BottomTabs作为最外层Stack的子组件引入，类似：

export const App: FunctionComponent = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName={'MainTab'}>
                <Stack.Screen key='MainTab' name='MainTab' component={BottomTabs} />
                {...}
            </Stack.Navigator>
        </NavigationContainer>
    );
};

默认展示底部导航页。