如何使用 react-navigation 在 React Native 中创建自定义顶部标签栏？

Question

我是 React Native 的新手，所以我不知道如何创建自定义顶部标签栏任何人帮助我或参考？

TabBar 输出应该是这样的，如果我点击日然后日组件呈现，如果我点击周然后周组件呈现这样。提前致谢

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

您需要做的是根据您的需要设置样式。