底部选项卡内的React本机底部选项卡

React Native提供了一个名为react-navigation的流行库，用于在React Native应用程序中实现导航

首先，确保您已经安装了所需的依赖项：

npm install @react-navigation/native @react-navigation/bottom-tabs react-native-screens react-native-safe-area-context

然后，在您的React Native项目中创建一个底部选项卡导航器：

// App.js
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

// 导入您的屏幕组件
import HomeScreen from './screens/HomeScreen';
import SettingsScreen from './screens/SettingsScreen';

const Tab = createBottomTabNavigator();

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

export default App;

在这个例子中，我们创建了一个包含两个选项卡（Home和Settings）的底部选项卡导航器。您可以根据需要添加更多选项卡。

接下来，创建您的屏幕组件。例如，这是一个简单的HomeScreen组件：

// screens/HomeScreen.js
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Welcome to the Home Screen!</Text>
    </View>
  );
}

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

export default HomeScreen;

同样，您可以创建其他屏幕组件，如SettingsScreen。

现在，当您运行React Native应用程序时，您应该看到一个底部选项卡导航器，其中包含您定义的选项卡。