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

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

代码语言：javascript复制

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

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

代码语言：javascript复制

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;

官方文档 插件

0 人点赞