Реальная высота изображения (полная ширина)

Question

У меня есть изображение, которое я снимаю с URL-адреса. Я не знаю размеров этого изображения раньше времени.

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

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

Изображение находится в <ScrollView/>. Я не получил изображение в полноэкранном режиме.

Answer 1

React Native имеет встроенную функцию, которая вернет ширину и высоту изображения: Image.getSize(). Check out the documentation here

Answer 2

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

на основе @ 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> 
    ) 
    } 
} 

Answer 3

упаковывает вы не можете решить еще, React Native v.0.42.0 имеет ResizeMode

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

Answer 4

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

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; 

Answer 5

Я новичок на реакцию родной, но я наткнулся на это решение, используя простой стиль:

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

Image full width from my 1º App

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

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