web-dev-qa-db-ja.com

React Native-画像の幅を100％、垂直方向を上にする方法

反応ネイティブの初心者です。私がやりたいのは、デバイス内の画像に適合し、画像の比率を維持することです。単純にwidth : 100%を作りたい

私はそれを作る方法を探しましたが、resizeMode = 'contain'はそのために良いようです。

ただし、resizeMode = 'contain'を使用したので、イメージは、望まない位置を垂直方向の中央に保ちます。垂直に上にしたいです。

react-native-fit-image のようなプラグインを使用しようとしましたが、運はありません。

そして、私は見つけました 画像が自動的にサイズ変更されない理由 。しかし、私はまだそれを作る方法がわかりません。

それで、私の質問は、この状況に対処する最良の方法は何ですか？

width, heightサイズの各画像を手動で配置する必要がありますか？

が欲しいです ：

  • 画像の比率を維持します。
  • 垂直方向の上部に配置されます。

ネイティブテストコードの反応：

https://snack.expo.io/ry3_W53rW

最終的に私が作りたいもの：

https://jsfiddle.net/hadeath03/mb43awLr/

ありがとう。

react-nativeimage-resizing
19
Téwa

スタイルプロパティにflex: 1を追加したため、画像は垂直方向の中央に配置されます。 flex：1を追加しないでください。この場合、画像が親に塗りつぶされますが、これは望ましくありません。

React Nativeの画像には常に高さと幅を追加する必要があります。画像が常に同じ場合、Dimensions.get('window').widthを使用して画像のサイズを計算できます。たとえば、比率が常に16x9の場合、高さは画像の幅の9/16になります。幅はデバイスの幅に等しいため、次のようになります。

const dimensions = Dimensions.get('window');
const imageHeight = Math.round(dimensions.width * 9 / 16);
const imageWidth = dimensions.width;

return (
   <Image
     style={{ height: imageHeight, width: imageWidth }}
   />
);

注：このような実装を使用する場合、デバイスを回転したり、分割画面を使用したりすると、画像のサイズは自動的に変更されません。複数のアクションをサポートする場合は、向き...

比率が同じでない場合は、異なる画像ごとに比率で9/16を動的に変更します。画像が少しトリミングされているのを気にしない場合は、高さを固定したカバーモードも使用できます：（ https://snack.expo.io/rk_NRnhHb ）

<Image
  resizeMode={'cover'}
  style={{ width: '100%', height: 200 }}
  source={{uri: temp}}
/>
24
dejakob

これも試してみてください

Image onLayoutコールバックがそのレイアウトプロパティを取得するのを待ち、それを使用して寸法を更新することもできます。そのためのコンポーネントを作成しました：

import * as React from 'react';
import { Dimensions, Image, ImageProperties, LayoutChangeEvent, StyleSheet, ViewStyle } from 'react-native';

export interface FullWidthImageState {
  width: number;
  height: number;
  stretched: boolean;
}

export default class FullWidthImage extends React.Component<ImageProperties, FullWidthImageState> {
  constructor(props: ImageProperties) {
    super(props);

    this.state = { width: 100, height: 100, stretched: false };
  }

  render() {
    return <Image {...this.props} style={this.getStyle()} onLayout={this.resizeImage} />;
  }

  private resizeImage = (event: LayoutChangeEvent) => {
    if (!this.state.stretched) {
      const width = Dimensions.get('window').width;
      const height = width * event.nativeEvent.layout.height / event.nativeEvent.layout.width;
      this.setState({ width, height, stretched: true });
    }
  };

  private getStyle = (): ViewStyle => {
    const style = [StyleSheet.flatten(this.props.style)];
    style.Push({ width: this.state.width, height: this.state.height });
    return StyleSheet.flatten(style);
  };
}

これにより、画面の幅に合わせて画像のサイズが更新されます。

2
gtRfnkN

このスタイルを画像に適用できます。imageStyleをImageタグに適用すると、画像の幅は100％になり、画像の高さは300になります。

imageStyle:{
height:300,
flex:1,
width:null
}

画像コードが次のとおりだとします：

<Image style={imageStyle} source={{uri:'uri of the Image'}} />
2
Muhammad Usman