装包:
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://www.toymoban.com/news/detail-642307.html
https://reactnavigation.org/docs/material-top-tab-navigator/ 文章来源地址https://www.toymoban.com/news/detail-642307.html
到了这里,关于RN 使用react-navigation写可以滚动的横向导航条(expo项目)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!