如何使用 react-navigation 在 React Native 中創建自定義頂部標簽欄？

Question

我是 React Native 的新手，所以我不知道如何創建自定義頂部標簽欄任何人幫助我或參考這個？

TabBar output 如果我點擊日然后日組件渲染應該是這樣的，如果我點擊周然后周組件是這樣渲染的。 提前致謝

Answer 1

您可以找到許多教程來創建自定義標簽欄。 使用 createMaterialTopTabNavigator 創建頂欄。

import { createMaterialTopTabNavigator, createAppContainer } from "react-navigation"
import TabBar from './TabBar'

const TabNavigator = createMaterialTopTabNavigator({
  feed: {
    screen: () => null,
  },
  profile: {
    screen: () => null,
  },
  inbox: {
    screen: () => null,
  }
}, {
  tabBarComponent: TabBar,
})

export default createAppContainer(TabNavigator)

TabBar 組件

import * as React from "react"
import { View } from "react-native"
import Tab from './Tab'

const TabBar = (props) => {
  const { navigationState, navigation, position } = props
  return (
    <View style={{
      height: 80,
      backgroundColor: 'seashell',
      flexDirection: "row",
      justifyContent: 'space-around',
      alignItems: 'center',
    }}>
    {navigationState.routes.map((route, index) => {
      const focusAnim = position.interpolate({
        inputRange: [index - 1, index, index + 1],
        outputRange: [0, 1, 0]
      })
      return (
        <Tab 
          focusAnim={focusAnim}
          title={route.routeName} 
          onPress={() => navigation.navigate(route.routeName)}
        />
      )
    })}
    </View>
  )
}

export default TabBar

選項卡組件

import * as React from "react"
import { Animated, TouchableOpacity } from "react-native"

const Tab = ({ focusAnim, title, onPress }) => {
  return (
    <TouchableOpacity onPress={onPress}>
      <Animated.View
        style={{
          padding: 10,
          borderRadius: 10,
          backgroundColor: focusAnim.interpolate({
            inputRange: [0, 1],
            outputRange: ["transparent", "tomato"]
          })
        }}
      >
        <Animated.Text
          style={{
            color: focusAnim.interpolate({
              inputRange: [0, 1],
              outputRange: ["#444", "#fff"]
            })
          }}
        >{title}</Animated.Text>
      </Animated.View>
    </TouchableOpacity>
  )
}

export default Tab

您需要做的是根據您的需要對其進行樣式設置。