React Nativeのイメージにパディングを追加しますか？

Question

私が取り組んでいる反応するネイティブアプリで、いくつかの画像にパディングを追加しようとしています。デバイス幅に基づいてイメージのサイズが変更され、各行に4つのイメージが表示されます。 this.props.imagesにはパディングなしで表示される9つの画像があります。私はこのような1のパディングを考慮して画像をラップしようとしている

：

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

しかし、私は最初の3枚のつのみの画像がパディングと表示されていることをしようとします。残りの画像は表示されません。

私の全体のコードはここにある：

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枚の写真をすべて表示したい。

Answer 1

私はコメント欄にトーマスが提供する提案を使って、私の問題を解決することができました。

私はalignSelfを追加しましたでした画像は正しく表示されている

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

：「フレックススタート」

はここでのコードは次のようになります。