React Native - 居中flexWrap內容

我有一個View需要在列表中呈現項目。項目需要連續渲染，然後環繞。我可以通過如下使用flexDirection和flexWrap來實現此行爲。問題是包裝的行都顯示爲左對齊，從而留下未確定的右側空間。這是有道理的，但我想知道是否有一種方法可以將內容集中在flexWrap創建的每一行中？React Native - 居中flexWrap內容

<View style={{alignItems: 'center', justifyContent: 'center'}}> 
    <View style={{alignItems: 'center', justifyContent: 'center', flexDirection: 'row', flexWrap: 'wrap'}}> 
    <Item value={1} /> 
    <Item value={2} /> 
    <Item value={3} /> 
    </View> 
</View>

來源

2016-12-01 Anshul Koka

你可以在這裏玩的flex和查找值的正確組合，以達到你想要什麼http://the-echoplex.net/flexyboxes/ – diedu

你有沒有嘗試添加'justifyContent：「center''？這將是'flexDirection：'row''中用於水平對齊的屬性。 –

感謝您在flexybox上分享鏈接。一個非常方便的工具。通過將'justifyContent'和'alignContent'設置爲'center'，我能夠在flexybox上工作，但在我的項目中仍然沒有運氣。 FWIW，React Native不支持'alignContent'並且將'justifyContent'添加到我的'View'似乎沒有效果。 –

外部alignItems莫名其妙地阻礙。我不確定內部工作原理以及爲什麼這會起作用，但下面的代碼現在按預期工作。

<View style={{justifyContent: 'center'}}> 
    <View style={{alignItems: 'center', justifyContent: 'center', flexDirection: 'row', flexWrap: 'wrap'}}> 
    <Item value={1} /> 
    <Item value={2} /> 
    <Item value={3} /> 
    </View> 
</View>

來源

2017-01-21 16:11:43

React Native - 居中flexWrap內容

回答

相關問題