在 createMaterialTopTabNavigator ReactNavigation 5 中添加图标

Question

由于 React Navigation 从版本 4 传递到版本 5，我无法找到如何显示图标而不是标签。我用过像这里这样的东西，但我得到了

创建导航器不需要参数。也许您正在尝试将 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>
  )
}

Answer 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} />
      ),
  }}
/>