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

Question

我正在尝试使用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}
      />
    );
  }
}

我尝试了Googling，但没有得到太多帮助。尝试过手动导入图标，但是没有运气。

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

Answer 1

1. 关闭正在运行的打包程序
2. 运行react-native link react-native-vector-icons
3. 和run react-native start --reset-cache
4. 最后使用react-native run-ios

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

如果RN <0.29，则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库的矢量图标。

谢谢！

Answer 2

使用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。