react-native 路由5.x配置

1、安装

npm install @react-navigation/native (or yarn add @react-navigation/native)
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view（or yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view）
npm install @react-navigation/stack（or yarn add @react-navigation/stack）
npm install @react-navigation/bottom-tabs（or yarn add @react-navigation/bottom-tabs）
npm install react-native-vector-icons（或者 yarn add react-native-vector-icons）

上面的那个icons如果安装有问题可以看一下我的这个文章点击跳转

2、项目结构：

3、开始配置

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Test from './src/test'
import Home from './src/home'
import Block from './src/block'
import News from './src/news'
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

function MyStack() {
    return (
        <Stack.Navigator>
            <Stack.Screen name="Home" component={Home} />
            <Stack.Screen name="News" component={News} />
        </Stack.Navigator>
    );
}
function MyStackTwo() {
    return (
        <Stack.Navigator>
            <Stack.Screen name="Test" component={Test} />
        </Stack.Navigator>
    );
}
export default function App() {
    return (
        <NavigationContainer>
            <Tab.Navigator
                screenOptions={({ route }) => ({
                    tabBarIcon: ({ focused, color, size }) => {
                        let iconName;
                        if (route.name === 'MyStack') {
                            iconName = focused ? 'ios-information-circle' : 'ios-information-circle-outline';
                        } else if (route.name === 'MyStackTwo') {
                            iconName = focused ? 'ios-list-box' : 'ios-list';
                        }else if (route.name === 'Block') {
                            iconName = focused ? 'ios-airplane' : 'ios-appstore';
                        }
                        return <Ionicons nae={iconName} size={size} color={color} />;
                    },
                })}
                tabBarOptions={{
                    activeTintColor: 'tomato',
                    inactiveTintColor: 'gray',
                }}
            >
                <Tab.Screen name="MyStack" component={MyStack} />
                <Tab.Screen name="MyStackTwo" component={MyStackTwo} />
                <Tab.Screen name="Block" component={Block} />
            </Tab.Navigator>
        </NavigationContainer>
    );
}

4、运行效果