在此处输入图片说明 我是本机反应的新手,所以我不知道如何创建“自定义”顶部标签栏,对此没有人提供帮助或参考吗?

如果我单击“天”然后渲染“天”,则TabBar输出应该是这样的;如果我单击“周”,则渲染一周的那部分。 提前致谢

#1楼 票数:0

您可以找到许多教程来创建自定义标签栏。 使用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

您需要做的是根据您的需要对其进行样式设置。

  ask by Safi Deraiya translate from so

未解决问题?本站智能推荐:

2回复

使用导航问题对原生 Redux 做出反应

我最近开始使用 React Native 进行编程,刚刚进入导航,它们非常酷且功能强大。 但是,作为初学者,我遇到了一些问题。 我正在使用 Redux 来管理状态,并且我有一个导航堆栈,它应该只在登录状态处于活动状态时呈现。 这是代码的一小段。 正如你在这里看到的,我的 RootStack 中有
1回复

反应本机导航

我正在制作一个应用程序,在其中使用了Drawer Navigator,并在其中嵌套了Stack Navigator。 抽屉包含屏幕HOME,PRODUCTS,Profile等。当我在Home屏幕中使用Stack导航器切换到3个不同的屏幕Products-> ItemDescription
2回复

React-native导航实验示例?

几个星期前我开始使用react-native 。 对于我的第一个应用程序,我使用导航器进行导航,其导航栏组件显示标题和左/右侧按钮。 在阅读之后, facebook已经放弃了对导航器的支持并开发了航空实验或导航 -rfc ( 将调用' NavExp '使其缩短 ),我正在尝试使用NavExp
5回复

React Native / Redux应用程序中可能存在的导航问题

在使用Redux的大型React Native应用程序中导航期间,所有访问过的场景(来自导航堆栈的场景)都保持挂载状态。 当从最后一个场景组件调度任何动作时,所有这些场景都接收道具并按照它们被访问的顺序进行渲染。 它会导致调度和最后一次场景渲染之间的冻结和可见延迟。 对于导航我使用的是
2回复

导航redux并基于API调用进行本地响应

我正在使用redux并在移动应用程序中进行本机响应。 我想根据API响应重定向到另一个屏幕。 我不知道该怎么做。 我已经使用动作,减速器并将其存储在我的应用程序中。 您能帮我找到标准解决方案吗? 先感谢您。
1回复

反应导航自定义OnClick

我正在尝试在屏幕中间创建一个按钮,该按钮在单击时将导航用户,并且我正在使用react-navigation库。 没有stackNavigator,HeaderNavigator或DrawerNavigator怎么办?
1回复

在导航上使用重新匹配存储问题对本机遗留导航器进行反应

我想在本机应用程序中使用 2 个不同的商店。 1 是简单的 redux 存储,而 1 是 rematch,就像它的包装器一样。 我正在尝试这样的事情, 商店.js 在组件中,我像这样连接 自定义连接.js 基本上,当组件页面加载并单击按钮时,标志在商店中成功更改,组件重新呈现并显示新
2回复

有反应原生导航的问题| undefined不是对象(评估'_this.props.navigation')

嗨,我正在开发一个新的react-native应用程序,但是我在从组件到屏幕的导航方面遇到了一些问题。 这是小吃代码的链接: https : //snack.expo.io/@mimonoux/my-app-navigation-test 我已经尝试过这个<ButtonCarte