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

【问题标题】：react-navigation tabBarComponent cannot read property "key" of undefinedreact-navigation tabBarComponent 无法读取未定义的属性“键”
【发布时间】：2019-06-25 06:37:24
【问题描述】：

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)

这些函数的文档很弱，但查看代码，似乎它们都需要一个包含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

【解决方案1】：

原来我没有正确阅读错误，它实际上告诉了我我需要知道的一切......

Cannot read property 'key' of undefined

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

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

简单胜出...

【讨论】：