使用react-导航- Tab创建自定义的可滚动顶部选项卡栏？

npm install react-navigation

import { createAppContainer } from 'react-navigation';
import { createMaterialTopTabNavigator } from 'react-navigation-tabs';

const TabNavigator = createMaterialTopTabNavigator(
  {
    Screen1: { screen: Screen1Component },
    Screen2: { screen: Screen2Component },
    Screen3: { screen: Screen3Component },
  },
  {
    tabBarOptions: {
      scrollEnabled: true, // 允许选项卡栏滚动
      tabStyle: {
        width: 120, // 每个选项卡的宽度
      },
      style: {
        backgroundColor: 'white', // 选项卡栏的背景颜色
      },
      indicatorStyle: {
        backgroundColor: 'blue', // 选项卡指示器的颜色
      },
    },
  }
);

const AppContainer = createAppContainer(TabNavigator);

export default function App() {
  return <AppContainer />;
}