反应本机图像高度（全宽）

问题描述：

我有一个图像，我从网址下拉。我不知道这个图像的尺寸提前。反应本机图像高度（全宽）

如何对<Image/>进行样式/布局设置，使其成为父视图的整个宽度，并计算高度以便保持高宽比？

我试过在0.34.0-rc.0中使用onLoad，高度/宽度在event.nativeEvent.source中都是0。

图片是在<ScrollView/>。我不是在全屏幕图像之后。

resizeMode：'cover'or'contain'？ – dv3

如果没有设置高度，我无法使用“封面”或“包含”。有任何想法吗？ –

ahh有这种奇怪的事情，将它们设置为null并使用flex ...我想你会在某处找到你的答案：http://stackoverflow.com/questions/29322973/whats-the-best-way-to- add-a-full-screen-background-image-in-react-native – dv3

答

React Native内置了一个函数，它将返回图像的宽度和高度：Image.getSize()。 Check out the documentation here

Spot on。我不能相信我在文档中错过了这一点。谢谢哥们！ –

答

我的用途是在我需要与全屏宽度但保持其宽高比以显示图像非常相似。

基于@ 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> 
    ) 
    } 
}

感谢您的代码！我一直在使用组件react-native-fit-image，但在加载图像时有很多问题，有时无法呈现我对您的代码所做的唯一修改是图片的样式是'' –

我在哪里提到图片的实际url？ – Somename

答

柜面你解决不了它，但反应原住民v.0.42.0已经resizeMode

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

答

它为我工作。

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;

答

我就反应过来，本地新的，但我用一个简单的风格遇到了这个解决方案：

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

Image full width from my 1º App

它为我 - 你有什么想法？

在此先感谢。

反应本机图像高度（全宽）

相关推荐