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

 

装包：

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 (
    
      666
    
  )
}

const SettingsScreen = () => {
  return (
    
      666
    
  )
}

const Tab = createMaterialTopTabNavigator()

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

  return (
    
      
        
        
        
        
        
        
      
    
  )
}

 

 

 

参考链接：

https://chat.xutongbao.top/

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

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