在 createMaterialTopTabNavigator ReactNavigation 5 中添加图标

Question

自从 React Navigation 从版本 4 升级到版本 5 后，我找不到如何显示图标而不是标签。我使用了之类的东西，但我得到了

Creating a navigator doesn't take an argument. Maybe you are trying to use React Navigation 4 API with 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} />
      ),
  }}
/>

在 createMaterialTopTabNavigator ReactNavigation 5 中添加图标

Add Icons in createMaterialTopTabNavigator ReactNavigation 5

navigator

reactjs

react-native

react-navigation