在 React Native 中,你可以使用 TabBarIOS 或者更常用的 react-navigation 库来创建 iOS 平台上的选项卡。以下是使用 react-navigation 库的一个简单例子:

首先,确保你已经安装了 react-navigation 库:
npm install @react-navigation/native @react-navigation/bottom-tabs

然后,你可以使用 BottomTabNavigator 来创建选项卡:
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Text, View } from 'react-native';

const Tab = createBottomTabNavigator();

const Screen1 = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>Tab 1</Text>
  </View>
);

const Screen2 = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>Tab 2</Text>
  </View>
);

const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Tab1" component={Screen1} />
        <Tab.Screen name="Tab2" component={Screen2} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

export default App;

在这个例子中,我们使用了 createBottomTabNavigator 创建了一个底部选项卡导航器,然后添加了两个选项卡(Tab.Screen)。你可以根据需要添加更多的选项卡,每个选项卡对应一个屏幕组件。

确保在项目中已经安装了 react-navigation 相关的库,如果没有,可以根据需要安装。


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