时间戳

首页 > 解决方案 > react-navigation tabBarComponent 无法读取未定义的属性“键”

react-navigation - react-navigation tabBarComponent 无法读取未定义的属性“键”

问题描述

react-navigation 的文档对我来说非常不清楚如何自定义tabBarComponent不仅仅是改变颜色。我能够为选项卡创建我的自定义组件并像这样指向它；

import { TabNavigator } from 'myComponentsSomewhere'

...

const Navigator = createBottomTabNavigator(
  {
    Route1: Route1Component,
    Route2: Route2Component,
    ...
  },
  {
    tabBarComponent: props => <TabNavigator {...props} />,
    tabBarOptions: {
      activeTintColor: colors.first,
      showLabel: false,
    },
  },
)

另一方面TabNavigator，我得到了我所期望的大量道具；

activeTintColor: "#d85089",
getAccessibilityLabel,
getButtonComponent,
...
navigation,
...

在navigation道具中，我可以到达state然后路线等......但我无法启动任何用于获取按钮或呈现图标的功能。( renderIcon, getButtonComponent)

这些函数的文档很弱，但查看代码，似乎它们都需要一个包含 a 等的“路由”key对象routeName。

可以在navigation.state.routes数组中找到该形状 - 但传递其中一个对象只会引发错误；

Cannot read property 'key' of undefined

这是错误代码的示例；

import React from 'react'
import { View, Text } from 'react-native'

const TabNavigator = props => {
  return props.navigation.state.routes.map(route =>
    props.getButtonComponent(route),
  )
}

export default TabNavigator

最终，我希望能够编写自己的代码来包含选项卡，而不是仅限于将代码传递给 react-navigation 标记。我不明白为什么当直接从导航道具中传递完整的路由对象时，道具中收到的任何渲染函数都不起作用

标签： react-navigation

解决方案

事实证明我没有正确阅读错误，这实际上告诉了我我需要知道的一切......

Cannot read property 'key' of undefined

getButtonComponent（以及navigationprop 中的所有其他获取函数）需要一个包含路由的对象，而不仅仅是路由。

getButtonComponent({ route })而不是getButtonComponent(route)

简单胜...

推荐阅读