31

私は実際の Android デバイスで React Native を使用しています。アプリのメイン コンポーネントに次の render 関数だけを使用して、非常に単純なアプリを作成する場合...

render() {
  <Image
    source={{uri:'http://resizing.flixster.com/DeLpPTAwX3O2LszOpeaMHjbzuAw=/53x77/dkpu1ddg7pbsk.cloudfront.net/movie/11/16/47/11164719_ori.jpg'}}
    style={
      {
        flex: 1,
        resizeMode: 'contain',
        backgroundColor: 'yellow'
      }          
    } />
}

デバイスで次の結果が得られます。 screenshot_2016-04-05-11-05-41

ご覧のとおり、背景全体が黄色であるため、画像要素が実際に画面全体のサイズを占めていることがわかります。しかし、それは間違ってレンダリングされているだけです。「カバー」の resizeMode は期待どおりに機能します (「ストレッチ」モードも同様です)。機能していないのは「contain」モードです (私の観点から最も重要なモードです)。画像が表示されないため、画像を ListView に配置すると、問題はさらに悪化します。

更新 1 フレデリックが指摘するように、「含む」は、イメージがコンテナーのサイズよりも大きい場合にのみ機能します。では、縦横比を維持したまま、画像をコンテナ全体のサイズにするにはどうすればよいでしょうか? パーセンテージは React のスタイルではまだサポートされておらず、画像が読み込まれた後に画像の幅と高さのプロパティを取得する方法がわかりません。Image コンポーネントに関連付けられたイベントは、その情報を提供しません。

更新 2 朗報です。現在、React Native v0.24.1 を使用していますが、実際のイメージ サイズがコンテナーよりも小さい場合でも、イメージの 'contain' モードが期待どおりに機能するようです。zvona のソリューションは優れています (ただし、onLayout は、画像がレンダリングされる画像ビューのサイズを提供しますが、読み込まれる実際の画像サイズは提供しないことに注意する必要があります)。今のところ、実際の画像サイズを調べる方法はわかりません (ネットワーク リソースから画像を取得していて、サイズがわからないとします。これは、計算する場合に非常に重要になる可能性があります)。その縦横比）。

4

6 に答える 6

12

これはトリックです：

 render() {
    return (
        <Image
          style={{ flex: 1, height: undefined, width: undefined }}
          source={require("../../resource/image/bg_splash.jpg")}
          resizeMode="contain"
        />

    );
  }
于 2019-05-25T07:32:39.927 に答える
8

これは、最新のreact-native 0.37で私にとってうまくいったものです:

<Image source={require('../images/my-image.png')} resizeMode={Image.resizeMode.center} />

質問の更新された部分に答える。Image.getSizeを使用して、外部画像の画像サイズを取得できます。

ローカル画像の場合、サイズを把握してアスペクト比を計算するためのあまり文書化されていない方法resolveAssetSourceは、反応ネイティブモジュールを使用しています（外部ライブラリは必要ありません）：

let resolveAssetSource = require('resolveAssetSource')
let { width, height } = resolveAssetSource(image_source)
let aspectRatio = width / height
于 2016-11-13T21:44:29.470 に答える
6

質問のUPDATED部分に対する私の答え:

<Image source={{uri:'...'}} onLayout={this.onImageLayout} />

どこ：

onImageLayout: function(data){
  console.log('layout', data.nativeEvent.layout);
}

これらは、次のようにして得られるデバイスの幅 + 高さに比例する必要があります。

const {
  Dimensions,
  .
  .
  .
} = React;

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

そして、スタイルのパーセンテージとして幅/高さを取得したい場合は、次のように定義するだけです:

const styles = StyleSheet.create({
  image: {
    width: windowWidth * 0.75,
    height: windowHeight * 0.33
  }          
});
于 2016-04-06T08:13:16.130 に答える
0

アスペクト比を追加するとうまくいきました：

<Image
  source={item.imageUrl && item.imageUrl != '' ? { uri: item.imageUrl } : require('../../assets/images/no-image-icon-15.png')}
  style={{
      flex: 1,
      aspectRatio: 1.5,
      height: undefined,
      width: undefined
  }}
  resizeMode="contain"
/>
于 2021-01-30T16:14:38.013 に答える