探索React Native Tab Navigator：构建高效导航的利器

import React from 'react';
import { View, Text } from 'react-native';
import { createMaterialTopTabNavigator } from 'react-navigation';
 
// 定义Tab Navigator中的Screen组件
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>
);
 
// 创建Tab Navigator
const TabNavigator = createMaterialTopTabNavigator({
  Home: {
    screen: HomeScreen
  },
  Settings: {
    screen: SettingsScreen
  }
});
 
export default TabNavigator;

这段代码演示了如何在React Native应用中使用react-navigation库中的createMaterialTopTabNavigator来创建一个顶部标签栏导航。代码中定义了两个简单的Screen组件，并将它们作为Tab Navigator的一部分进行了注册。最后，通过导出Tab Navigator，我们可以在应用的其他部分中嵌入这个导航器。