在 createMaterialTopTabNavigator ReactNavigation 5 中添加图标答案

【问题标题】：Add Icons in createMaterialTopTabNavigator ReactNavigation 5在 createMaterialTopTabNavigator ReactNavigation 5 中添加图标
【发布时间】：2021-02-04 22:20:08
【问题描述】：

由于 React Navigation 从版本 4 传递到 5，我无法找到如何显示图标而不是标签。我用过here之类的东西，但我明白了

创建导航器不需要参数。也许你正试图将 React Navigation 4 API 与 React Navigation 5 一起使用

我找不到如何为我的每个屏幕传递 tabBarIcon..

附上我的简化代码，有人可以帮助我吗？

import React, { useState } from 'react'
import { Icon } from 'react-native-elements'
import { NavigationContainer } from '@react-navigation/native'
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'

import OverViewComponent from '..'
import MatosComponent from '..'
import PhotographerComponent from '..'

const Tab = createMaterialTopTabNavigator()

export default function App() {
  const [start, setstart] = useState(
    new Date(xxxxx)
  )
  const [end, setend] = useState(xxxx)
  const [changed, setchange] = useState(xxxx)

  const setNewDate = (value) => {xxxx
  }

  return (
    <NavigationContainer>
      <Tab.Navigator
        tabBarOptions={{
          activeTintColor: 'black',
          inactiveTintColor: '#525252',
          activeBackgroundColor: 'green',
          showIcon: true,
          showLabel: false,
          iconStyle: {
            width: 'auto',
            height: 20,
          },
          tabStyle: {
            backgroundColor: '#a8a4b4',
            margin: 0.2,
            borderRadius: 2,
          },
        }}
      >
        <Tab.Screen
          name="Résumé"
          component={OverViewComponent}
          numberOfLines={1}
          initialParams={{
            startdate: start,
            enddate: end,
            haschange: changed,
            onChange: { setNewDate },
          }}
        />

        <Tab.Screen
          name="Matos"
          numberOfLines={1}
          component={MatosComponent}
          initialParams={{
            startdate: start,
            enddate: end,
            haschange: changed,
            onChange: { setNewDate },
          }}
        />

        <Tab.Screen
          name="Gens"
          numberOfLines={1}
          component={PhotographerComponent}
          initialParams={{
            startdate: start,
            enddate: end,
            haschange: changed,
            onChange: { setNewDate },
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  )
}

【问题讨论】：

标签： reactjs react-native react-navigation navigator

【解决方案1】：

你可以这样做：

<Tab.Screen
  name="Home"
  component={Home}
  options={{
    tabBarIcon: () => <Image source={iconHome} />,
  }}
/>

您还可以获取一些属性并执行此操作：

<Tab.Screen
  name="Home"
  component={Home}
  options={{
    tabBarLabel: 'Homescreen',
    tabBarIcon: ({ focused }) =>
      focused ? (
        <Image source={iconHomeActive} />
      ) : (
        <Image source={iconHomeInactive} />
      ),
  }}
/>

【讨论】：