在较早版本的 React Native 中，可以使用 TabBarIOS 和 TabBarIOS.Item 组件来创建 iOS 平台上的选项卡。然而，需要注意的是，自 React Navigation v6.0 版本以后，createBottomTabNavigator 已经成为了更常见的选择，而不再依赖 TabBarIOS。

以下是一个使用 TabBarIOS 和 TabBarIOS.Item 的简单例子：
import React from 'react';
import { View, Text, TabBarIOS, StyleSheet } from 'react-native';

const App = () => {
  const [selectedTab, setSelectedTab] = React.useState('tab1');

  return (
    <TabBarIOS style={styles.container}>
      <TabBarIOS.Item
        title="Tab 1"
        systemIcon="favorites"
        selected={selectedTab === 'tab1'}
        onPress={() => setSelectedTab('tab1')}
      >
        <View style={[styles.tabContent, { backgroundColor: 'powderblue' }]}>
          <Text>Tab 1 Content</Text>
        </View>
      </TabBarIOS.Item>

      <TabBarIOS.Item
        title="Tab 2"
        systemIcon="bookmarks"
        selected={selectedTab === 'tab2'}
        onPress={() => setSelectedTab('tab2')}
      >
        <View style={[styles.tabContent, { backgroundColor: 'skyblue' }]}>
          <Text>Tab 2 Content</Text>
        </View>
      </TabBarIOS.Item>
    </TabBarIOS>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  tabContent: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;

在这个例子中，我们使用了 TabBarIOS 和 TabBarIOS.Item，通过 selected 和 onPress 属性来管理选项卡的选中状态和点击事件。每个 TabBarIOS.Item 都包含一个与之关联的内容区域。

请注意，由于 React Navigation 的发展，建议在新的项目中使用 react-navigation 的 createBottomTabNavigator 来创建底部导航栏，因为它是更现代且更通用的解决方案。


转载请注明出处：http://www.zyzy.cn/article/detail/9475/React Native