添加填充到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張帶填充的圖片都能顯示出來。

來源

2016-11-07 dozo

你可以添加圖片的設計？ – 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> 
) 
}

的圖片現在正確顯示。

來源

2016-11-09 17:22:52 dozo

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

回答

相關問題