Question

У меня проблема с отображением значка в моем приложении.Какой бы значок я не импортировал, например: из исходной базы React, @ expo / vector-icons, Reaction-native-vector-icons / Ionicons ... и т. Д.

Отображается только (X) или?

Я опробовал многие методы, в том числе реакцию на нативную ссылку, используя значок импорта по умолчанию из React-Native.Все это не работает.

Ссылка:

1) https://ionicons.com/cheatsheet.html

2) https://www.npmjs.com/package/react-native-ionicons

Iприкреплю мой код и скриншот здесь, надеюсь, это поможет решить мою проблему.Спасибо.

import Icon from 'react-native-ionicons'


        <ListItem style={styles.listitem_home} onPress={this.navigateToScreen('ExampleSendDataScreen')}>
          <Thumbnail square size={80} source={require('../../assets/images/message.png')}  style={{marginRight: 10}}/>
          <Body>
            <Text>{Strings.ST17}</Text>
            <Text numberOfLines={1} note style={styles.note_home}>{Strings.ST17}</Text>
          </Body>
          <Right>
            <Icon name="menu" style={styles.icon_home} />                
          </Right>
        </ListItem>

Стили значков

icon_home:{

fontSize: 20,
color: 'black'
},

Единственная иконка, отображаемая в моем приложении, в настоящее время - это кнопка Назад навигатора.

Редактировать 1: Установлено @ expo / vector-icons 9.0.0

Редактировать 2: Обновлено до Expo v32

Package.json

"dependencies": {
"@expo/vector-icons": "^9.0.0",
"@material-ui/core": "^3.9.0",
"@types/expo__vector-icons": "^6.2.3",
"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",
"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",
"react-native-gesture-handler": "^1.0.12",
"react-native-gifted-chat": "^0.7.2",
"react-native-gifted-messenger": "^0.1.4",
"react-native-image-picker": "^0.28.0",
"react-native-ionicons": "^4.4.6",
"react-native-keyboard-aware-scroll-view": "^0.7.4",
"react-native-linear-gradient": "^2.5.3",
"react-native-maps": "^0.22.1",
"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",
"react-native-splash-screen": "^3.1.1",
"react-native-timeago": "^0.4.0",
"react-native-vector-icons": "^6.2.0",
"react-navigation": "^3.0.7",
"react-navigation-header-buttons": "^2.1.1",
"react-simple-line-icons": "^1.0.8",
"scheduler": "^0.11.3",
"tcomb-form-native": "^0.6.20"  },

App.json

"expo": {
"name": "FirstTry",
"description": "This project is really great.",
"slug": "firsttry",
"privacy": "public",
"sdkVersion": "32.0.0",
"platforms": ["ios", "android"],
"version": "2.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"androidStatusBarColor": "#7bcbdb",
"androidStatusBar": {
"barStyle": "light-content",
"backgroundColor": "#7bcbdb"
},
"splash": {
  "image": "./assets/splash.png",
  "resizeMode": "contain",
  "backgroundColor": "#ffffff"
},
"updates": {
  "fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
  "**/*"
],
"ios": {
  "bundleIdentifier": "com.firsttry",
  "supportsTablet": true
},
"android": {
  "package": "com.firsttry",
  "versionCode": 2

}

Новая ОШИБКА.undefined не является объектом (оценивающим _expo.default.Constant) в моем ConfigApp.js

ConfigApp.js

import Expo from 'expo';

const isStandAloneApp = Expo.Constants.appOwnership == "standalone";

const ConfigApp = {

// backend url
URL: "YOUR_BACKEND_URL",

// banner admob unit id
BANNER_ID: "YOUR_BANNER_ID",

// interstitial admob unit id
INTERSTITIAL_ID: "YOUR_INTERSTITIAL_ID",

// testdevice id, DON'T CHANGE IT
TESTDEVICE_ID : isStandAloneApp?"EMULATOR" : "EMULATOR"
};

export default ConfigApp;

Редактировать 3: Невозможно разрешить "@ expo / vector-icons" из "application \ navigations \ Logged.js"

const leftIcon = (navigation, icon) => <Ionicons
name={icon}
style={{marginLeft: 20}}
size={27}
color="white"
onPress={() => navigation.navigate('DrawerOpen')}
/>; 

  HomeScreen: {
screen: HomeScreen,
navigationOptions: ({navigation}) => ({
  headerLeft: leftIcon(navigation, "md-menu")
})
},

Редактировать 4: значок по-прежнему отображается неправильно

Andrew · Answer 1 · 31 января 2019

Вы не можете использовать 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" />

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

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

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

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

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"  
},

React Native Используя Expo, неправильно отображается иконка [(X) и?]

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

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

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

React Native Используя Expo, неправильно отображается иконка [(X) и?]

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

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

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

Похожие темы

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