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

Question

React-native： 0.47.1

当宽度为 100% 时，我将如何保持高度的纵横比？基本上我想在保持纵横比的同时自动缩放高度。图像将以FlatList显示(不一定，如果还有其他问题，我很乐意更改FlatList(。图像从state中设置的data数组中显示：

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

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

非常感谢

Answer 1

您可以从 URI 中获取图像的尺寸。您可以使用组件中包含的静态方法遍历数组getSize()并获取每个图像的尺寸Image。下面是此方法的文档

例：

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

我不确定上面的代码是否 100% 正确，但你的想法:)

编辑：

你也可以使用这个模块，它应该为你做所有事情：反应原生适合图像

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