Rn使用material-top-tabs导航滑动切换

安装之前请确保安装了​​这些依赖​​ 主要使用的插件依赖

npm install @react-navigation/material-top-tabs react-native-tab-view@^2.16.0

​​详情请看官方文档​​ 使用方法

import React from 'react';
import { View, Text } from "react-native"
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
const Tab = createMaterialTopTabNavigator();
const HomeScreen = () => {
    return (
        <View>
            <Text>文字占位</Text>
            <Text>文字占位</Text>
        </View>
    )
}

const Mine = () => {
    return (
        <Tab.Navigator tabBarOptions={{
            //选中文字颜色
            activeTintColor: '#2C3167',
            //设置选中底部条颜色
            indicatorStyle: {
                backgroundColor: "#2C3167"
            }
        }}>
            <Tab.Screen name="导航1" component={HomeScreen} />
            <Tab.Screen name="导航2" component={HomeScreen} />
            <Tab.Screen name="导航3" component={HomeScreen} />
            <Tab.Screen name="导航4" component={HomeScreen} />
            <Tab.Screen name="导航5" component={HomeScreen} />
        </Tab.Navigator>
    );
}

export default Mine;