渲染网络图像和保持高度

宽高比阵营天然：0.47.1渲染网络图像和保持高度

如何将保持高度的纵横比时的宽度为100％？基本上我想在保持纵横比的同时自动缩放高度。图像将显示在FlatList（不一定，如果有其他事情我很乐意更改FlatList）。图像被从data数组，它在state设置显示：

export default class ImageTest extends Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     data : [ 
     {id: 1, name: "image1", url: "http://urlOfImage.com/1.jpg"} 
     {id: 2, name: "image2", url: "http://urlOfImage.com/2.jpg"} 
     {id: 3, name: "image3", url: "http://urlOfImage.com/3.jpg"} 
     {id: 4, name: "image4", url: "http://urlOfImage.com/4.jpg"} 
     {id: 5, name: "image5", url: "http://urlOfImage.com/5.jpg"} 
     ]; 
    } 
    } 

    render() { 
    return (
    <View style={styles.container}> 
     <FlatList 
      data={this.state.data} 
      renderItem = {({item})=> 
       <Text style={styles.item}>{item.name}</Text> 
       <Image 
        source={uri: item.url} 
        style={styles.myImageStyle} /> 
      } 
     /> 
    </View> 
    ) 
    } 
} 

const styles = StyleSheet.create(
    myImageStyle: { 
    width: Dimensions.get('window').width, 
    height: /* WHAT DO I PUT HERE ?? */ 
    } 
)

因此图像可以在高度发生变化，原来的高度可以是700像素，一些也许1200像素，或者甚至方形的图像。我如何定义每个图像的高度，因为它们来自数组？

非常感谢

来源

2017-08-13 Somename

看看[react-native-scalable-image]（https://www.npmjs.com/package/react-native-scalable-image） –

您可以从URI获取图片的尺寸。您可以循环访问阵列，并使用Image组件中包含的静态方法getSize()获取每个图像的尺寸。这里是一个documentation for this method

例子：

const preloadedImgData = [] 
this.state.data.forEach((img) => { 
    Image.getSize(img.url, (w, h) => { 
     img.dimensions = {w, h} 
     preloadedImgData.push(img) 
    }) 
})

我不知道，如果上面的代码是100％正确的，但你有这个想法:)

编辑：

你也可以使用这个模块，它应该尽你所能：react-native-fit-image

- 我不是这个模块的拥有者

来源

2017-08-13 19:51:55 mkatanski

它作品！ 'fit-image'模块做到了。我要去探索它，看看它们是如何工作的。它到目前为止并不适用于本地图像，但它非常棒！万分感谢。我实际上只是简单地看了一下，并跳过它，因为第一个例子说预先提到尺寸。我应该测试它。再次感谢队友。干杯！！ – Somename

渲染网络图像和保持高度

回答

相关问题