添加填充到React Native中的图像？

问题描述：

我正在尝试在我正在处理的反应原生应用程序中为某些图像添加填充。图像根据设备宽度调整大小，以便每行显示四个图像。在这个.props.images中有9个图像显示没有任何填充。添加填充到React Native中的图像？

我已经试过包装在一个视图中的图像与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' 
    } 
});

如何添加填充和有我所有的图片显示正常吗？

下面是我希望我的应用程序显示图像的图像。

但这里是它是如何，当我从包裹的renderRow功能在与填充回报显示。有填充是我想要的，但只显示前3张图片。我希望所有9张带填充的图片都能显示出来。

你可以添加图片的设计？ – Jickson

你可以添加'alignItems：'flex-start''到列表的样式项吗？ – Thomas

我已添加图片以更好地解释我遇到的问题。 – dozo

答

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

我所做的就是添加alignSelf：“柔性启动”

下面是代码的样子：

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

的图片现在正确显示。

添加填充到React Native中的图像？

相关推荐