Question

我正在图像库上进行维护。我需要在ListView中每行显示3张图片。

renderCategory(category) {
    return (
        <Image source={{uri: category.image}} style={styles.image}>
            <Text style={styles.headline}>{category.name}</Text>
        </Image>
      );
    }
  render() {
    return (
      <View>
      <Button title="Back" color="#5c6bc0" onPress={this.onPress}/>
      <ListView dataSource={this.state.dataSource} renderRow={this.renderCategory} contentContainerStyle={styles.list_view}/>
      </View>
    );
  }

我用宽度做了什么

image: {
        height: 110,
        width: Dimensions.get('window').width / 3 
}

这里我很难记录图像高度。是否可以使用反应原生的给定宽度调整图像高度。

Answer 1

示例代码：

image: {
    width: Dimensions.get('window').width / 3 - 10 ,
    height: Dimensions.get('window').width / 3 - 10,
    margin:5,
    resizeMode: 'contain',

}

Answer 2

例如，如果原始图像宽度/高度为500像素x 1000像素。并且您希望将方面无线电保持为静态宽度。

const radio = 1000/500;
const static_width = Dimensions.get('window').width / 3;

image: {
    height: static_width * radio,
    width: static_width;
}

希望得到这个帮助。

如何在React-Native中保持给定宽度的图像宽高比？

2 个答案: