React Native和{flex：1}

Question

將規則flex: 1設置爲許多React Native組件的確切目的是什麼？

很多時候我可以看到這個規則適用於不同的組件。有時這個規則顯然是多餘的有時沒有明顯的，但佈局似乎沒有它運作良好。

那麼，這個規則是什麼設想呢？

Answer 1

如果該組件呈現良好而不使用flex: 1，則顯然不需要。您可能還想刪除不需要的樣式。 flex: 1所做的是告訴組件佔用儘可能多的空間。

例如：

<View style={{ flex: 1, backgroundColor: '#cccccc' }}> 
    <Text>Hi</Text> 
</View> 

這將跨越整個屏幕。

但是，如果將另一個視圖放在DOM中的同一級別，則兩個視圖將佔用相等的空間，即屏幕將分爲兩部分。

像這樣：

<View style={{ flex: 1 }}> 
    <View style={{ flex: 1, backgroundColor: '#cccccc' }}> 
     <Text>View one</Text> 
    </View> 
    <View style={{ flex: 1, backgroundColor: '#eaeaea' }}> 
     <Text>View two</Text> 
    </View> 
</View> 

我同意Flexbox將是一個有點混亂。但是一旦你掌握了它，你就會學會如何操縱視圖。

編輯：始終使用父組件包裝子組件，以避免潛在的運行時錯誤。

Answer 2

對於佈局React Native使用flexbox，因爲display: flex;非常適合在各種屏幕尺寸和設備上創建響應式佈局。所有屬性名稱和值都在React Native docs中列出。

換句話說，而不是使用display: block與各種float s您的佈局應使用flexbox規則創建。

Modus Create在Flexbox in React Native上做了一個很好的教程。

具體來說，該規則：

flex: 1 

告訴元素增長以填充可用空間。