@react-navigation/material-top-tabs

安装

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

description：

代码：

import * as React from 'react';
import {Text, View} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';

function HomeScreen() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createMaterialTopTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        tabBarOptions={{
          // 未选中字体的颜色
          inactiveTintColor: 'black',

          // 选中的字体的颜色
          activeTintColor: 'blue',

          // 按压下去，那一块的背景颜色
          pressColor: '#FE9E0E',

          // 按压下去的透明度
          pressOpacity: 0.1,

          // Whether to enable scrollable tabs.
          scrollEnabled: false,

          // 选项卡底部的行的样式
          // 选中之后底部会有一个蓝色的行，把这个行搞没
          indicatorStyle: {
            height: 0,
          },

          // 是否显示Label
          showLabel: true,

          // 里面文字name的大小 Style object for the tab label.
          labelStyle: {fontSize: 12, backgroundColor: 'red'},

          // 导航栏的宽度 Style object for the tab
          // 不写的话默认填充屏幕宽度
          tabStyle: {width: 200, backgroundColor: 'blue'},

          // 导航栏的背景颜色 Style object for the tab bar
          style: {backgroundColor: 'powderblue'},
        }}>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

案例：

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
const Tab = createMaterialTopTabNavigator();

class LoginTab extends Component{};
class RegisterTab extends Component{};
this.state = {
  pages: [
    {
      name: '登录',
      component: LoginTab,
    },
    {
      name: '注册',
      component: RegisterTab,
    },
  ],
};

MyTabs = () => {
  let { pages } = this.state;
  return (
    <Tab.Navigator
      tabBarOptions={{
        inactiveTintColor: '#e2dddd',
        activeTintColor: '#FFFFFF',
        pressColor: '#FE9E0E',
        indicatorStyle: {
          height: 0,
        },
        labelStyle: {
          fontSize: pxToDp(30),
        },
        style: styles.tabBarOptions,
      }}
    >
      {pages.map((v, i) => (
        <Tab.Screen name={v.name} component={v.component} key={i} />
      ))}
    </Tab.Navigator>
  );
};