?

裝包：

yarn add @react-navigation/material-top-tabs react-native-tab-view

?

npx expo install react-native-pager-view

?

?

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/?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-642307.html

到了這里，關(guān)于RN 使用react-navigation寫(xiě)可以滾動(dòng)的橫向?qū)Ш綏l（expo項(xiàng)目）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！