web-dev-qa-db-ja.com

React Nativeでイメージモジュールを必要とする問題

React-Native で始めたばかりで、静止画像を要求するのに苦労しています。

ここに私がこれまで持っている非常に基本的なコードがあります：

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  Image,
  View,
} = React;

var buzz = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Image source={require('image!bg')}  style={styles.bg}>
          <Text style={styles.welcome}>
            Welcome to Buzz! iOS interface to
          </Text>
          <Text style={styles.welcomeHeader}>Charityware</Text>
        </Image>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent'
  },
  welcomeHeader: {
    fontWeight: '600',
    fontFamily: 'Helvetica',
    color: '#fff',
    fontSize: 50,
    alignSelf: 'center'
  },
  bg: {
    width: 400,
    height: 300,
    alignSelf: 'auto',

  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
  },
});

AppRegistry.registerComponent('buzz', () => buzz);

主な問題領域は次のとおりです。

    <Image source={require('image!bg')}  style={styles.bg}>
      <Text style={styles.welcome}>
        Welcome to Buzz! iOS interface to
      </Text>
      <Text style={styles.welcomeHeader}>Charityware</Text>
    </Image>

アプリをパッケージ化して実行すると、レンダリングエラーが発生します。 error image

require呼び出しで画像を見つけ、そのために画像セットを追加するには、画像セットとしてxcodeに画像を追加する必要があることを理解しています。 bg image

...しかし役に立たない。誰もが考えている？私はドキュメントを読んでおり、seem規定の方法でこれを行っています。ありがとう！

javascriptiosxcodereactjsreact-native
41
markthethomas

React Native release 0.14画像の処理はiOS向けに正規化され、Androidとなり、現在は異なります。Githubにあるこの非常に明確なコミットノート以外のドキュメントは見つかりませんでした： 新しい資産システムを文書化します 。

提案されたドキュメントのスクリーンショットのみがあります： enter image description here

更新：実際のドキュメントへのリンクがあります： https://facebook.github.io/react-native/docs/images.html

44
jlapoutre

同様の問題が発生したため、ファイルシステム内のイメージファイルの名前をxcodeプロジェクトの_Images.xcassets_ディレクトリの下に変更しました。

たとえば、source={require('image!Villagers')}の場合、_Villagers.png_、_[email protected]_、_[email protected]_という名前の画像ファイルが必要です。ファイル名の「@ 3x」の部分がない場合、画像は見つかりません。

31
McG

React Nativeのどのバージョンを実行していますか？それに関連するパッケージャーに問題があり、解決されています。

その場合は、次を使用してdevサーバーを更新または実行できます。

node_modules/react-native/packager/packager.sh --assetRoots path/to/Images.xcassets

https://github.com/facebook/react-native/issues/282

4
tadeuzagallo

注：新しいリソースに必要なアプリビルド新しいリソースをImages.xcassetsに追加するときは、使用する前にXCodeでアプリを再ビルドする必要があります-シミュレーター内からのリロードでは不十分です。 （from React Native docs https://facebook.github.io/react-native/docs/image.html#content ）

また、パッケージャを再起動してください。これで問題は解決しました。

2
user1813705

アセットフォルダーにpackage.jsonファイルを作成すると、画像を簡単に参照できます。

プロジェクトフォルダー構造

package.json

そして、このコードで呼び出すことができます。

<Image 
   source={require('assets/img/avatar.png')} 
   style={styles.itemAvatar}
   resizeMode={'cover'}
/>
1
Mikhail Gorelyshev

静止画像の場合、次のようなパスを指定する必要があります。

<Image source={require('./images/back.png')}  
style= {{width:25, height:25, marginLeft:12, padding:12}}/>

プロジェクトディレクトリのimagesフォルダに保存されている画像の場合、これは私にとってはうまくいきました：

0
Анураг Пракаш