Добавить дополнение к изображениям в React Native?

Question

Я пытаюсь добавить дополнение к некоторым изображениям в ответном родном приложении, над которым я работаю. Изображения изменяются в зависимости от ширины устройства, так что в каждой строке отображаются четыре. В этом файле.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 в с набивкой. Есть дополнение, которое я хочу, но показаны только первые 3 изображения. Я хочу, чтобы все 9 изображений с прописью показывались.

Answer 1

Я был в состоянии решить мою проблему с помощью предложения, представленного Томас в разделе комментариев.

Что я сделал добавить alignSelf: 'Flex-старт'

Вот что код выглядит следующим образом:

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

Изображения теперь будут правильно отображаться.