Вы не можете использовать react-native-ionicons с Expo, так как процесс установки требует обновления кода родной. https://github.com/fanqfanh/react-native-ionicons

Однако Expo поставляется в комплекте с Ionicons, который можно использовать следующим образом:

Добавьте следующий оператор импорта вверху вашего компонента.

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

Затем используйте их так

<Ionicons name = "md-menu" size = {32} color = "green" />

Вы также должны проверить имя правильный, чтобы использовать его здесь.

https://expo.github.io/vector-icons/

это связано с тем, что vector-icons может использовать имена, отличные от исходного пакета значков, который вы используете.

Для получения дополнительной информации о различных значках, которые есть в Expo, см. документацию.

https://docs.expo.io/versions/latest/guides/icons/

Вот простая закуска, показывающая, как это работает https://snack.expo.io/@andypandy/iconicons-example В нем показаны различия между значками для iOS и Android и способы их переключения в зависимости от платформы.

import * as React from 'react';
import { Text, View, StyleSheet, Platform } from 'react-native';
import { Constants } from 'expo';
import { Ionicons } from '@expo/vector-icons';


export default class App extends React.Component {
  render() {
    return (
      <View style = {styles.container}>
        <Ionicons name = "md-menu" size = {32} color = "green" />
        <Ionicons name = "ios-menu" size = {32} color = "red" />
        <Ionicons name = {Platform.OS === 'ios' ? "ios-menu" : 'md-menu'} size = {32} color = "blue" />
        <Ionicons name = "md-checkmark" size = {32} color = "green" />
        <Ionicons name = "ios-checkmark" size = {32} color = "red" />
        <Ionicons name = {Platform.OS === 'ios' ? "ios-checkmark" : 'md-checkmark'} size = {32} color = "blue" />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems:'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

Обновления package.json

Я прокомментировал, от каких зависимостей, по моему мнению, вы можете безопасно избавиться от вашего package.json. Их не следовало добавлять, так как они либо требуют доступа к собственному коду, либо уже включены в Expo.

"dependencies": {
  "@expo/vector-icons": "^9.0.0", // already included in expo
  "@material-ui/core": "^3.9.0",
  "@types/expo__vector-icons": "^6.2.3", // only required if you are using typescript, but I don't think you are using that
  "antd-mobile": "^2.2.6",
  "babel-plugin-import": "^1.11.0",
  "es6-symbol": "^3.1.1",
  "expo": "^32.0.0",
  "firebase": "^5.8.1",
  "haversine": "^1.1.0", 
  "moment": "^2.23.0",
  "moment-timezone": "^0.5.23",
  "native-base": "^2.8.1",
  "prop-types": "^15.6.2",
  "re-base": "^4.0.0",
  "react": "16.5.0",
  "react-dom": "^16.7.0",
  "react-moment": "^0.8.4",
  "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
  "react-native-audio": "^4.3.0", // can't be used in Expo as it requires native code
  "react-native-aws3": "0.0.8",
  "react-native-button": "^2.3.0",
  "react-native-elements": "^0.19.1",
  "react-native-emoji-selector": "^0.1.6",
  "react-native-fontawesome": "^6.0.1", // requires you to add the font yourself, also it is included in expo
  "react-native-gesture-handler": "^1.0.12", // already included in expo
  "react-native-gifted-chat": "^0.7.2",
  "react-native-gifted-messenger": "^0.1.4",
  "react-native-image-picker": "^0.28.0", // can't use this in expo as it requires native code
  "react-native-ionicons": "^4.4.6", // already included in expo, 
  "react-native-keyboard-aware-scroll-view": "^0.7.4",
  "react-native-linear-gradient": "^2.5.3", // can't be used in expo as it requires native code
  "react-native-maps": "^0.22.1", // already included in expo
  "react-native-navbar": "^2.1.0",
  "react-native-render-html": "^3.10.0",
  "react-native-router-flux": "^4.0.6",
  "react-native-sound": "^0.10.9", // cannot use this in expo as it requires native code
  "react-native-splash-screen": "^3.1.1", // cannot use this in expo as it requires native code
  "react-native-timeago": "^0.4.0",
  "react-native-vector-icons": "^6.2.0", // cannot use this in expo as it requires native code
  "react-navigation": "^3.0.7",
  "react-navigation-header-buttons": "^2.1.1",
  "react-simple-line-icons": "^1.0.8",
  "scheduler": "^0.11.3", // this is used internally by React, I don't think you require it here
  "tcomb-form-native": "^0.6.20"  
},

Вы должны использовать

import { registerRootComponent } from 'expo';
import App from './App';

registerRootComponent(App);

вместо

import {AppRegistry} from 'react-native';
import App from './App';

AppRegistry.registerComponent('main', () => App);

чтобы зарегистрировать ваш основной компонент. Вот решение в Expo https://github.com/expo/vector-icons/issues/89#issuecomment-475217923

В моем случае я получал SQUARE X из-за шага, требуемого react-native-svg-transformer. Это была проблема только после того, как я обновился с SDK38 до SDK40.

Для меня сработал обходной путь, заключающийся в удалении файла metro.config.js, который запросил добавить модуль трансформатора. Я даже не уверен, использовал ли я больше функциональность, которая требовала этого преобразователя. Удаление его не имело для меня пагубного эффекта. Это может иметь пагубные последствия для вас, но стоит попробовать, чтобы увидеть, исправит ли это вас. Я задокументировал здесь ошибку, чтобы предупредить команду SVG Transformer на случай, если с их стороны потребуется исправление.

https://github.com/kristerkari/react-native-svg-transformer/issues/128

Таким образом, обходной путь состоит в том, чтобы удалить metro.config.js (или удалить изменения, внесенные в metro.config.js, если они были у вас до изменений этого модуля), затем «expo start -c» и повторить попытку.

Дайте мне знать, если это кому-нибудь поможет!

У меня была та же проблема с неправильным отображением значков, даже если большинство вещей были настроены правильно.

Это было связано с тем, что я использовал собственный файл metro.config.js с этим кодом внутри.

transformer: {
     babelTransformerPath: require.resolve('react-native-sass-transformer'),
},

Это переопределит преобразователь, необходимый для векторных значков. В итоге я последовал этому ответу, и это сработало:

Настройте несколько преобразователей/резольверов с помощью метро