Question

我有一个列表，可以连续显示一定数量的图像。我想要的是每张图像之间有空间。我试图使用填充但它没有工作。

这就是我所拥有的：

class ImageList extends Component {
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
  dataSource: ds.cloneWithRows([
    require('./images/ex1.jpg'), require('./images/ex2.jpg'), require('./images/ex3.jpg')
  ])
};


}

  render() {
    return (
      <View>
        <ListView
          contentContainerStyle={styles.list}
          dataSource={this.state.dataSource}
          renderRow={(rowData) => <Image source={rowData} style={styles.imageSize}/>}
        />
      </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'
    }
});

在主文件中调用代码：

class Main extends Component {

 render(){
    return(

  <ScrollView>

  <View style={{flex: 1}}>
     <View>
      <ImageList/>
     </View>
  </View>

  </ScrollView>
);
  }
};

我已经尝试在每个View中添加填充，我必须查看它是否有效。但到目前为止，没有任何工作。

我用这样的视图包装了rawData：

render() {
return (
  <View>
    <ListView automaticallyAdjustContentInsets={false}
      contentContainerStyle={styles.list}
      dataSource={this.state.dataSource}
      renderRow={(rowData) => <View style={{padding: 1}}><Image source={rowData} style={styles.imageSize}/></View>}
    />
  </View>

但这导致了一个问题。当我尝试拥有超过3张图像时，只显示前3张图像。其余的都无处可寻。

如何在React-Native中围绕图像填充？

0 个答案: