gpt4 book ai didi

image - 在 React Native 中为图像添加填充?

转载 作者:行者123 更新时间:2023-12-01 16:09:04 24 4
gpt4 key购买 nike

我正在尝试向我正在开发的 React Native 应用程序中的某些图像添加填充。图像根据设备宽度调整大小,以便每行显示四个图像。在 this.props.images 中,有 9 个图像,它们在没有任何填充的情况下显示。

我尝试将图像包装在 View 中,填充为 1,如下所示:

renderRow(rowData){
const {uri} = rowData;
return(
<View style={{padding: 1}}>
<Image style={styles.imageSize} source={{uri: uri}} />
</View>
)
}

但是当我尝试只显示前三个图像时,会带有填充。其余图像不会出现。

我的整个代码在这里:

class ImageList extends Component {
componentWillMount(){
const ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
this.dataSource = ds.cloneWithRows(this.props.images);
}

renderRow(rowData){
const {uri} = rowData;

return(
<Image style={styles.imageSize} source={{uri: uri}} />
)
}

render() {
return (
<View>
<ListView
contentContainerStyle={styles.list}
dataSource={this.dataSource}
renderRow={this.renderRow}
/>
</View>
);
}
}

var styles = StyleSheet.create({
imageSize: {

//newWidth is the width of the device divided by 4.
//This is so that four images will display in each row.
width: newWidth,
height: newWidth,
padding: 2
},
list: {
flexDirection: 'row',
flexWrap: 'wrap'
}
});

如何添加填充并使我的所有图像正确显示?

这是我希望我的应用程序如何显示图像的图像。

All the images displayed in rows like I want

但是,当我将 renderRow 函数的返回值包装在带有填充的内容中时,它是如何显示的。有填充,这是我想要的,但只显示前 3 张图片。我想要显示所有 9 张带有填充的图片。

Not displayed correctly.

最佳答案

通过使用托马斯在评论部分提供的建议,我能够解决我的问题。

我所做的是添加alignSelf:'flex-start'

代码如下:

renderRow(rowData){
const {uri} = rowData;
return(
<View style={{padding: 1, alignSelf: 'flex-start'}}>
<Image style={styles.imageSize} source={{uri: uri}} />
</View>
)
}

图片现在可以正确显示。

关于image - 在 React Native 中为图像添加填充?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40456271/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com