底部导航图标在 Android 和 iOS 中显示为正方形

Posted 2023-03-15

【中文标题】底部导航图标在 Android 和 iOS 中显示为正方形

【英文标题】：Bottom Navgiation Icons showing as squares in Android and iOS

【发布时间】：2018-11-23 12:21:30

【问题描述】：

我正在尝试使用 Expo 开发 React Native 应用程序。

我发现了一些非常有趣的框架，比如 react-native-paper。我正在尝试使用他们提供的Bottom Navigation example, see the "Try this example on Snack" link。

但是，当我运行该示例时，我的所有设备都没有显示任何图标，只是在它们应该在的地方显示白色方块。在 ios 和 android 上进行了测试。

import * as React from 'react';
import  BottomNavigation, Text  from 'react-native-paper';

const MusicRoute = () => <Text>Music</Text>;

const AlbumsRoute = () => <Text>Albums</Text>;

const RecentsRoute = () => <Text>Recents</Text>;

export default class MyComponent extends React.Component 
  state = 
    index: 0,
    routes: [
       key: 'music', title: 'Music', icon: 'queue-music' ,
       key: 'albums', title: 'Albums', icon: 'album' ,
       key: 'recents', title: 'Recents', icon: 'history' ,
    ],
  ;

  _handleIndexChange = index => this.setState( index );

  _renderScene = BottomNavigation.SceneMap(
    music: MusicRoute,
    albums: AlbumsRoute,
    recents: RecentsRoute,
  );

  render() 
    return (
      <BottomNavigation
        navigationState=this.state
        onIndexChange=this._handleIndexChange
        renderScene=this._renderScene
      />
    );
  

我尝试用谷歌搜索，但没有得到太多帮助。尝试手动导入图标，但没有成功。

import  Ionicons  from '@expo/vector-icons';

【问题讨论】：

分享你目前尝试过的代码。或者您只是尝试了底部导航教程中的示例？

@Sateesh 就像我说的，我正在使用 @Expo 的教程小吃，但它不起作用。

【参考方案1】：

安装react-native-paper 和yarn。并在下面依次安装这些命令。

yarn add react-native-paper

yarn add react-navigation-material-bottom-tabs react-native-paper

yarn add react-native-vector-icons

react-native link react-native-vector-icons

停止当前正在运行的项目，仅当它不工作时才重新运行react-native run-ios --simulator "iPhone XR"。

编辑：

如果您使用 Expo，则无需安装矢量图标。但是你需要确保你的 .babelrc 包含 babel-preset-expo:

  "presets": ["expo"]

如果您不使用 React Native Paper 应用程序，您还应该将 react-native-paper/babel 添加到您的 .babelrc 以避免导入整个库。请参阅Getting Started guide 了解更多信息。

【讨论】：

所以图标不应该在世博会网站上工作？我正在使用snack.expo.io

谢谢！创建一个名为 .babelrc 的文件并使用您的 sn-p 工作。太奇怪了，他们在预览中没有提到这一点。

是的，他们没有。当我尝试底部导航时，我也遇到了同样的问题。经过大量研发后才知道 .babelsc 不见了。

【参考方案2】：

关闭正在运行的打包程序 运行react-native link react-native-vector-icons 和run react-native start --reset-cache 终于用react-native run-ios

尝试运行rm -rf node_modules && npm install

如果 RN run rnpm link react-native-vector-icons

如果 RN >= 0.29，run react-native link react-native-vector-icons

Paper库也有可能再次安装react-native-vector-icon，而react-native也有自己的vector-icon，所以它们之间发生了冲突。所以，也试试把Paper库的vector-icon去掉。

谢谢！！！

【讨论】：

所以图标不应该在世博会网站上工作？我正在使用snack.expo.io