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

装包:

bash 复制代码
yarn add @react-navigation/material-top-tabs react-native-tab-view
bash 复制代码
npx expo install react-native-pager-view
javascript 复制代码
import React from 'react'
import { View, Text, ScrollView, SafeAreaView } from 'react-native'
import { Icon } from '../../../../../component/light'
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'
import useList from './useList'
import styles from './styles'

const HomeScreen = () => {
  return (
    <ScrollView style={styles.mMeTabsScrollView}>
      <Text>666</Text>
    </ScrollView>
  )
}

const SettingsScreen = () => {
  return (
    <ScrollView style={styles.mMeTabsScrollView}>
      <Text>666</Text>
    </ScrollView>
  )
}

const Tab = createMaterialTopTabNavigator()

export default function Home(props) {
  const { index, userInfo, handleSetIndex, handleJumpPage, handleQuit } =
    useList(props)

  return (
    <View style={{ flex: 1 }}>
      <Tab.Navigator
        screenOptions={{
          tabBarScrollEnabled: true,
        }}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
        <Tab.Screen name="Home1" component={HomeScreen} />
        <Tab.Screen name="Settings1" component={SettingsScreen} />
        <Tab.Screen name="Home2" component={HomeScreen} />
        <Tab.Screen name="Settings2" component={SettingsScreen} />
      </Tab.Navigator>
    </View>
  )
}

参考链接:

https://chat.xutongbao.top/

https://www.cnblogs.com/tengyuxin/p/13263143.html

https://reactnavigation.org/docs/material-top-tab-navigator/

相关推荐
OLong15 分钟前
2025年最强React插件,支持大量快捷操作
前端·react.js·visual studio code
江城开朗的豌豆15 分钟前
路由守卫通关秘籍:这些钩子函数让你的页面跳转稳如老狗!
前端·javascript·vue.js
朝阳3918 分钟前
ReactNative【实战系列教程】我的小红书 3 -- 自定义底栏Tab导航(含图片选择 expo-image-picker 的使用)
react native
摸鱼仙人~20 分钟前
重塑智能体决策路径:深入理解 ReAct 框架
前端·react.js·前端框架
sunbyte24 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue
柚子81626 分钟前
告别FLIP动画:View Transition API带来的革命性变革
前端·javascript
天涯学馆30 分钟前
JS 组合模式在组件化开发中的应用:从原理到实战
前端·javascript·面试
FogLetter31 分钟前
闭包:JavaScript中的魔法背包
前端·javascript
江城开朗的豌豆32 分钟前
Vuex中mutations和actions的那些事儿:为啥非要分家?
前端·javascript·vue.js
WTSolutions40 分钟前
Image Pixel RGBA Extractor:免费在线图像像素色彩提取工具全解析
javascript