Question

自从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>
  )
}

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中添加图标

1 个答案: