React Native Tab Navigator：一款强大的选项卡导航组件

import React from 'react';
import { View, Text } from 'react-native';
import { createMaterialTopTabNavigator } from 'react-navigation';
 
// 定义选项卡页面组件
const HomeScreen = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>Home Screen</Text>
  </View>
);
 
const SettingsScreen = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>Settings Screen</Text>
  </View>
);
 
// 创建选项卡导航器
const TabNavigator = createMaterialTopTabNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      tabBarLabel: 'Home',
      tabBarIcon: ({ tintColor }) => (
        <Image source={require('./home-icon.png')} style={{ width: 20, height: 20, tintColor: tintColor }} />
      ),
    },
  },
  Settings: {
    screen: SettingsScreen,
    navigationOptions: {
      tabBarLabel: 'Settings',
      tabBarIcon: ({ tintColor }) => (
        <Image source={require('./settings-icon.png')} style={{ width: 20, height: 20, tintColor: tintColor }} />
      ),
    },
  },
});
 
export default TabNavigator;

这个代码实例展示了如何使用React Navigation的createMaterialTopTabNavigator来创建一个顶部选项卡导航器，并为每个选项卡指定了一个标签和图标。代码中使用了两个简单的屏幕组件HomeScreen和SettingsScreen，以及一个图标Image组件来显示标签上的图标。这个例子提供了一个基本的用法，可以根据实际需求进行扩展和定制。