检查 BottomNavigation - React Native 的渲染方法

Posted 2023-02-21

【中文标题】检查 BottomNavigation - React Native 的渲染方法

【英文标题】：Check the render method of 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 文档中建议的。我的编码有什么问题？我需要标签中的图标

【参考方案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';