web-dev-qa-db-ja.com

React Nativeで画像 'contain' resizeModeが機能しない

私はReact実際のデバイスでネイティブAndroid=を使用しています。メインアプリコンポーネントで次のレンダリング機能のみを使用して本当にシンプルなアプリを作成する場合...

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は期待どおりに機能します（「ストレッチ」モードも同様です）。動作していないのは「含む」モードです（私の観点からすると最も重要なモードです）。画像は表示されないため、リストビューに画像を配置すると、問題はさらに悪化します。

PDATE 1 Frederickが指摘するように、 'contain'は、画像がコンテナサイズよりも大きい場合にのみ機能します。それでは、アスペクト比を維持したまま、どのようにして画像をコンテナ全体のサイズにすることができますか？ Reactのスタイルではパーセントはまだサポートされていません。また、画像が読み込まれたら、画像の幅と高さのプロパティを取得する方法がわかりません。 Imageコンポーネントに関連付けられたイベントはいずれもその情報を提供しません。

更新2良いニュース。私は現在React Native v0.24.1を使用しており、実際の画像サイズがコンテナよりも小さい場合でも、画像の「含む」モードが期待どおりに動作するようです。zvonaのソリューションは優れていますがonLayoutは、イメージがレンダリングされるイメージビューサイズを提供しますが、ロードされる実際のイメージサイズは提供しないことに留意する必要があります）。今のところ、実際のイメージサイズを見つける方法はわかりません。 （ネットワークリソースから画像を取得していて、サイズがわからないとします。これは、アスペクト比を計算する場合に非常に重要になる可能性があります）。

react-nativereact-native-listview
21
user3621841

これは最新のソリューションです。

Image.resizeMode.containは最新バージョンのリアクションネイティブでは動作しないため、次のように使用します。

import ImageResizeMode from 'react-native/Libraries/Image/ImageResizeMode'

<Image source={image} resizeMode={ImageResizeMode.contain} />
8
Sagar Chavada

[〜＃〜] 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
  }          
});
6
zvona

これが最新の反応ネイティブ0.37で私にとってうまくいったことです：

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

質問のupdated部分に回答する。 Image.getSize を使用して、外部画像の画像サイズを取得できます。

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

let resolveAssetSource = require('resolveAssetSource')
let { width, height } = resolveAssetSource(image_source)
let aspectRatio = width / height
6
ragamufin

これはトリックです：

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

    );
  }
1
Rahul Rastogi

「含む」は、画像サイズが、それを収めようとしているコンテナよりも大きいlargerの場合にのみ画像のサイズを変更します。この場合、コンテナはフルスクリーン。 URL経由で読み込んでいる画像は、53 x 77ピクセルしかないため、はるかに小さくなります。したがって、サイズは変更されません。

「カバー」はあなたが達成しようとしていることをすべきだと思います。ただし、画像のサイズが原因で、そのように拡大した場合、画像はあまり見栄えが良くなりません。ここに例を作成しました： https://rnplay.org/apps/X5eMEw

0
Frederick Motte