web-dev-qa-db-ja.com

React Expoを使用したネイティブでアイコンが正しく表示されない[（X）および？]

アプリでのアイコンの表示に問題があります。インポートするアイコンが何であれ、たとえば、Reactネイティブベース、@ expo/vector-icons、react-native-vector-icons/Ionicons ...などから。

（X）または？のみが表示されます。

React-Nativeのデフォルトのインポートアイコンを使用して、react-nativeリンクを含む多くの方法を試しました。それはすべて機能しません。

参考：

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

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

ここにコードとスクリーンショットを添付します。問題解決に役立つことを願っています。ありがとうございました。

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

私のアプリで現在表示されている唯一のアイコンは、ナビゲーターの[戻る]ボタンです。 enter image description here

enter image description here

編集1：インストールされた@ expo/vector-icons 9.0.0enter image description hereenter image description here

編集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は私のConfigApp.jsのオブジェクトではありません（「_expo.default.Constant」を評価しています）

enter image description here

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：「application\navigations\Logged.js」から「@ expo/vector-icons」を解決できません

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：アイコンがまだ正しく表示されない

enter image description here

react-nativeiconsfont-awesomeexpoionicons
3
Alex Chong

インストールプロセスではnativeコードを更新する必要があるため、Expoでreact-native-ioniconsを使用することはできません。 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"  
},
6
Andrew

MainComponentを登録するには、registerComponentではなくregisterRootComponentを使用する必要があります。Expoのソリューションは次のとおりです https://github.com/expo/vector-icons/issues/89#issuecomment-47521792

0
nntona