推荐项目：React Native Tabs —— 优雅的React Native标签页组件

import React from 'react';
import { View, Text } from 'react-native';
import { TabView, SceneMap, TabBar } from 'react-native-tab-view';
 
export default class MyTabs extends React.Component {
  state = {
    index: 0,
    routes: [
      { key: 'first', title: 'First' },
      { key: 'second', title: 'Second' },
    ],
  };
 
  renderScene = SceneMap({
    first: FirstComponent,
    second: SecondComponent,
  });
 
  renderTabBar = props => (
    <TabBar
      {...props}
      indicatorStyle={{ backgroundColor: 'white' }}
      style={{ backgroundColor: '#333333' }}
    />
  );
 
  render() {
    return (
      <TabView
        navigationState={this.state}
        renderScene={this.renderScene}
        renderTabBar={this.renderTabBar}
        onIndexChange={index => this.setState({ index })}
        initialLayout={initialLayout}
      />
    );
  }
}
 
const initialLayout = { width: Dimensions.get('window').width };
 
const FirstComponent = () => (
  <View style={{ flex: 1, backgroundColor: '#ff0000' }}>
    <Text>First tab content</Text>
  </View>
);
 
const SecondComponent = () => (
  <View style={{ flex: 1, backgroundColor: '#00ff00' }}>
    <Text>Second tab content</Text>
  </View>
);

这个代码实例展示了如何使用react-native-tab-view库来创建一个带有自定义指示器样式和标签栏样式的标签页组件。代码中定义了两个标签页组件FirstComponent和SecondComponent，以及一个包含它们的容器组件MyTabs。通过TabView组件和SceneMap，我们可以轻松地在不同的标签页之间切换，并且可以通过renderTabBar方法自定义标签栏的外观。