Reactjs 渲染网络图像并保持高度的纵横比

反应本机：0.47.1

当宽度为100%时，如何保持高度的纵横比？基本上我想在保持纵横比的同时自动缩放高度。图像将显示在

平面列表

（不一定，如果出现其他问题，我很乐意更改

平面列表

）。从设置为

状态的
数据数组中显示图像
：

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 ?? */
  }
)

导出默认类ImageTest扩展组件{
建造师（道具）{
超级（道具）
此.state={
数据：[
{id:1，名称：“image1”，url:http://urlOfImage.com/1.jpg"}
{id:2，名称：“image2”，url:http://urlOfImage.com/2.jpg"}
{id:3，名称：“image3”，url:http://urlOfImage.com/3.jpg"}
{id:4，名称：“image4”，url:http://urlOfImage.com/4.jpg"}
{id:5，名称：“image5”，url:http://urlOfImage.com/5.jpg"}
];
}
}
render（）{
返回(
{item.name}
}
/>
)
}
}
const styles=StyleSheet.create(
myImageStyle：{
宽度：尺寸。获取（'窗口'）。宽度，
高度：/*我在这里放什么*/
}
)

因此图像的高度可能会有所不同，原始高度可能是700px，有些可能是1200px，甚至是方形图像。由于每个图像来自一个数组，我如何定义它们的高度

非常感谢
您可以从URI获取图像的维度。您可以在数组中循环，并使用
image
组件中包含的静态方法
getSize（）
获取每个图像的尺寸。这是一个

例如：

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

我不确定上面的代码是否100%正确，但您的想法是：）

编辑：

此外，您还可以使用此模块，该模块将为您完成所有工作：

-我不是这个模块的所有者
它可以工作！
fit image
模块完成了这一任务。我要探索一下，看看他们是如何做到的。到目前为止，它在本地图像上还不起作用，但它太棒了！非常感谢。实际上，我对它做了一个简单的观察，并跳过了它，因为第一个例子说明了预先提到的维度。我应该测试一下。再次感谢你，伙计。干杯工作起来很有魅力…看看