首先,确保你已经安装了 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