react-native
イメージ

画像モジュール

react-nativeパッケージからImageをインポートする必要がありますので、それを使用してください：

import { Image } from 'react';

<Image source={{uri: 'https://image-souce.com/awesomeImage'}} />

やや異なった構文を持ち、同じロジックを持つローカルイメージを使うこともできます：

import { Image } from 'react';

<Image source={require('./img/myCoolImage.png')} />

注： - 画像に高さと幅を指定する必要があります。それ以外の場合は表示されません。

イメージの例

class ImageExample extends Component {
  render() {
    return (
      <View>
        <Image style={{width: 30, height: 30}}
          source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
        />
      </View>
    );
  }
}

条件付き画像ソース

<Image style={[this.props.imageStyle]}
        source={this.props.imagePath
        ? this.props.imagePath
        : require('../theme/images/resource.png')}
    />

パスがimagePathで利用可能な場合は、それがソースに割り当てられます。そうでない場合、デフォルトの画像パスが割り当てられます。

画像パスに変数を使用する

let imagePath = require("../../assets/list.png");

<Image style={{height: 50, width: 50}} source={imagePath} />

外部リソースから：

<Image style={{height: 50, width: 50}} source={{uri: userData.image}} />

画像に合わせる

<Image 
    resizeMode="contain" 
    style={{height: 100, width: 100}} 
    source={require('../assets/image.png')} />

カバー 、 ストレッチ 、 リピート 、 センターパラメーターも試してみてください。