RN 使用react-navigation写可以滚动的横向导航条（expo项目）

在React Native项目中，使用react-navigation库可以创建可滚动的横向导航条。以下是一个简单的例子：

首先，安装react-navigation和react-navigation-tabs库：

npm install @react-navigation/native
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-navigation/native-stack @react-navigation/bottom-tabs

然后，配置react-navigation：

import * as React from 'react';
import { View, Text, StyleSheet, SafeAreaView } from 'react-native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
 
const Tab = createMaterialTopTabNavigator();
 
function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text>Home Screen</Text>
    </View>
  );
}
 
function SettingsScreen() {
  return (
    <View style={styles.container}>
      <Text>Settings Screen</Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
 
export default function App() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Tab.Navigator
        tabBarOptions={{
          scrollEnabled: true,
          tabStyle: { width: 200 }, // 设置标签宽度
        }}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
        {/* 可以继续添加更多的标签 */}
      </Tab.Navigator>
    </SafeAreaView>
  );
}

在这个例子中，Tab.Navigator是一个可滚动的横向导航条，你可以添加多个Tab.Screen来扩展导航栏。通过tabBarOptions的scrollEnabled属性，可以控制导航栏是否可以滚动。tabStyle属性用于设置每个标签的宽度，以此来控制横向滚动的程度。