在 React Native 中为图像添加填充？答案

【问题标题】：Add padding to images in React Native?在 React Native 中为图像添加填充？
【发布时间】：2017-03-20 06:29:50
【问题描述】：

我正在尝试在我正在开发的 react 本机应用程序中为某些图像添加填充。图像会根据设备宽度调整大小，以便每行显示四个。在 this.props.images 中有 9 张图像，它们显示时没有任何填充。

我尝试将图像包装在一个填充为 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 函数的返回值包装在带填充的 a 中时，它是如何显示的。有我想要的填充，但只显示前 3 张图片。我希望显示所有 9 张带填充的图片。

【问题讨论】：

你能加一张设计图吗？
可以把alignItems: 'flex-start'添加到列表的样式项吗？
我已添加图片以更好地解释我遇到的问题。

标签： image listview react-native padding

【解决方案1】：

通过使用 Thomas 在评论部分提供的建议，我能够解决我的问题。

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

代码如下：

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

图片现在可以正确显示。

【讨论】：