web-dev-qa-db-ja.com

React-Native Image Height（全幅）

URLからプルダウンした画像があります。私は事前にこの画像の寸法を知りません。

<Image/>をスタイル設定/レイアウトして、親ビューの幅全体にし、縦横比が維持されるように高さを計算するにはどうすればよいですか？

0.34.0-rc.0でonLoadを使用しようとしましたが、event.nativeEvent.sourceで高さ/幅が両方とも0です。

画像は<ScrollView/>にあります。全画面画像ではありません。

imagereact-nativefull-width
16
Alex Curtis

React Nativeには、画像の幅と高さを返すImage.getSize()という関数が組み込まれています。 こちらのドキュメントをご覧ください

7
Jason Gaare

私の使用法は非常によく似ていました。フルスクリーン幅で画像を表示する必要がありましたが、アスペクト比を維持です。

Image.getSize()を使用するという@JasonGaareの回答に基づいて、次の実装を思い付きました。

class PostItem extends React.Component {

  state = {
    imgWidth: 0,
    imgHeight: 0,
  }

  componentDidMount() {

    Image.getSize(this.props.imageUrl, (width, height) => {
      // calculate image width and height 
      const screenWidth = Dimensions.get('window').width
      const scaleFactor = width / screenWidth
      const imageHeight = height / scaleFactor
      this.setState({imgWidth: screenWidth, imgHeight: imageHeight})
    })
  }

  render() {

    const {imgWidth, imgHeight} = this.state

    return (
      <View>
        <Image
          style={{width: imgWidth, height: imgHeight}}
          source={{uri: this.props.imageUrl}}
        />
        <Text style={styles.title}>
          {this.props.description}
        </Text>
      </View>
    )
  }
}
17
nburk

私は反応ネイティブで新しいですが、シンプルなスタイルを使用してこのソリューションに出会いました：

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

私の1ºアプリからの画像の全幅

それは私のために働いた-あなたの考えは何ですか？

前もって感謝します。

11
rfdc

それは私のために働いた。

import React from 'react'
import { View, Text, Image } from 'react-native'

class Test extends React.Component {
  render() {
    return (
      <View>
        <Image
          source={{ uri: "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQL6goeE1IdiDqIUXUzhzeijVV90TDQpigOkiJGhzaJRbdecSEf" }}
          style={{ height: 200, left: 0, right: 0 }}
          resizeMode="contain"
        />
        <Text style={{ textAlign: "center" }}>Papaya</Text>
      </View>
    );
  }
}

export default Test;

レイアウトイベント後に親ビューの幅を取得する別の方法。

<View 
  style={{ flex: 1}} 
  layout={(event) => { this.setState({ width: event.nativeEvent.layout.width }); }}
/>

レイアウトイベントから幅の親ビューを取得する場合、Imageタグに幅を割り当てることができます。

import React from 'react';
import { View, Image } from 'react-native';

class Card extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      height: 300,
      width: 0
    };
  }
  render() {
    return (
      <View style={{
        flex: 1,
        flexDirection: 'row'
      }}>
        <View style={{ width: 50, backgroundColor: '#f00' }} />
        <View
          style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fafafa' }}
          onLayout={(event) => { this.setState({ width: event.nativeEvent.layout.width }); }}
        >
          {
            this.state.width === 0 ? null : (
              <Image
                source={{ uri: "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQL6goeE1IdiDqIUXUzhzeijVV90TDQpigOkiJGhzaJRbdecSEf" }}
                style={{ width: this.state.width, height: this.state.height }}
                resizeMode="contain"
              />
            )
          }
        </View>
      </View>
    );
  }
}
export default Card;
4
Kakashi