React - Высота Собственного Изображения (Полная Ширина)

у меня есть изображение, которое я вытаскиваю из url. Я не знаю размеров этого изображения заранее.

как мне стиль / макет <Image/> таким образом, это полная ширина родительского вида и высота рассчитывается так, чтобы соотношение сторон поддерживалось?

Я пробовал использовать onLoad в 0.34.0-rc.0 и высота / ширина и 0 в event.nativeEvent.source.

изображение в <ScrollView/>. Мне не нужно полноэкранное изображение.

8
full-width image react-native

5 ответов

React Native имеет встроенную функцию, которая возвращает ширину и высоту изображения:Image.getSize(). ознакомьтесь с документацией здесь

4

мое использование было очень похоже на то, что мне нужно было отобразить изображение с полная ширина экрана но поддержание соотношения сторон.

на основе ответа @JasonGaare использовать Image.getSize(), Я придумал следующую реализацию:

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>
    )
  }
}
10

Я новичок в react-native, но я столкнулся с этим решением, используя простой стиль:

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

изображение полной ширины из моего приложения 1º

это сработало для меня-каковы ваши мысли?

спасибо заранее.

5

это сработало для меня.

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 }); }}
/>

когда вы получаете Родительский вид ширины из события макета, вы можете назначить ширину тегу изображения.

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;
3

Если вы еще не можете его решить, реагируйте Native V. 0.42.0 имеют resizeMode

<Image style={styles.intro_img} source={require('img.png')}
-2