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/

相关推荐
萌萌哒草头将军4 分钟前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js
gnip35 分钟前
http缓存
前端·javascript
JohnYan2 小时前
工作笔记 - 微信消息发送和处理
javascript·后端·微信
陈陈爱java2 小时前
Spring八股文
开发语言·javascript·数据库
小鱼儿亮亮2 小时前
canvas中画线条,线条效果比预期宽1像素且模糊问题分析及解决方案
前端·react.js
@大迁世界2 小时前
用 popover=“hint“ 打造友好的 HTML 提示:一招让界面更“懂人”
开发语言·前端·javascript·css·html
小鱼儿亮亮2 小时前
使用Redux的combineReducers对数据拆分
前端·react.js
烛阴2 小时前
【TS 设计模式完全指南】用工厂方法模式打造你的“对象生产线”
javascript·设计模式·typescript
定栓3 小时前
Typescript入门-类型断言讲解
前端·javascript·typescript
xiaominlaopodaren3 小时前
“UI里就可以请求数据库”,让你陌生的 React 特性
前端·javascript·react.js