检查 BottomNavigation - React Native 的渲染方法答案

【问题标题】：Check the render method of BottomNavigation - React Native检查 BottomNavigation - React Native 的渲染方法
【发布时间】：2020-05-31 13:15:21
【问题描述】：

我正在 react native 项目中创建底部导航。它适用于以下编码。

App.js

import React from 'react';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import { MaterialCommunityIcons } from 'react-native-vector-icons';
import { NavigationContainer } from '@react-navigation/native';

import Accounts from './src/components/Accounts';
// ...importing other screens here...

const Tab = createMaterialBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Feed"
      activeColor="#e91e63"
      labelStyle={{ fontSize: 12 }}
      style={{ backgroundColor: 'tomato' }}>
      <Tab.Screen name="Accounts" component={Accounts} />
      ...Other screens comes here...
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

但我需要在标签中添加图标。所以我在Screen中添加了以下道具

<Tab.Screen
  name="Accounts"
  component={Accounts}
  options={{
    tabBarLabel: 'Home',
    tabBarIcon: ({ color, size }) => (
      <MaterialCommunityIcons name="home" color={color} size={size} />
    ),
  }}
/>

添加这些道具后，我收到以下错误

不变违规：元素类型无效：预期字符串（对于内置组件）或类/函数（用于复合组件）但未定义。您可能忘记从它在其中定义的文件，或者您可能混淆了默认值和命名进口

根据文档，我做的一切都是正确的。这些道具是从 React Navigation 文档中建议的。我的编码有什么问题？我需要标签中的图标

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

如果你使用 npm：

rm -rf node_modules

rm package-lock.json

npm install

或纱线，使用：

rm -rf node_modules

rm yarn.lock

yarn

这里是a link reactnavigation.org！ :)

【讨论】：

【解决方案2】：

我相信你必须在 Tab.Navigator 属性上创建图标。

这是一个使用不同图标包的示例，但应该可以正常工作：https://reactnavigation.org/docs/en/tab-based-navigation.html

// You can import Ionicons from @expo/vector-icons if you use Expo or
// react-native-vector-icons/Ionicons otherwise.
import { Ionicons } from '@expo/vector-icons';

// (...)

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            if (route.name === 'Home') {
              iconName = focused
                ? 'ios-information-circle'
                : 'ios-information-circle-outline';
            } else if (route.name === 'Settings') {
              iconName = focused ? 'ios-list-box' : 'ios-list';
            }

            // You can return any component that you like here!
            return <Ionicons name={iconName} size={size} color={color} />;
          },
        })}
        tabBarOptions={{
          activeTintColor: 'tomato',
          inactiveTintColor: 'gray',
        }}>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

【讨论】：

我试过这个，但我得到了同样的错误。如果我删除 screenOptions 道具它正在工作

【解决方案3】：

如果有人遇到此问题，请检查您使用的 @react-navigation 软件包的版本。如果其中一个包使用的主要版本与其他包不同，则可能会发生此错误。如果是这种情况，只需降级或升级不匹配的软件包。升级通常需要更改。通常会有版本说明，说明升级之间的变化。这是 @react-navigation/material-bottom-tabs 的升级说明。

【讨论】：

好点。就我而言，就是 + expo 缓存。所以我不得不运行expo start -c。谢谢！

【解决方案4】：

这可以通过导入 MaterialCommunityIcons 来解决，例如

import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

【讨论】：