子視圖搬出父母鑑於反應本土

Question

我有一個父<View>型和兒童型<Text>。如果文本值很大，文本將移出容器視圖。任何想法如何包含它？ P.S.我不想文本通過修剪和遵循「...」，因爲我需要動畫添加到它，並滾動它放回視圖。

Answer 1

爲了解決這個問題，我建議使用彈性。下面是一個簡單的例子：

<View style={{ 
flex:1, 
flexWrap:'wrap', 
flexDirection:'row', 
justifyContent:'center', 
alignItems:'center', 
marginTop:50}}> 
    <Text>Something</Text> 
    <Text>Something</Text> 
    <Text>Something</Text> 
    <Text>Something</Text> 
    <Text>Something</Text> 
    <Text>Something</Text> 
    <Text>Something</Text> 
    <Text>Something</Text> 
</View> 

這裏的關鍵是flex:1和flexWrap:'wrap'，它告訴使用所有可用的空間，幷包裹住它的子視圖。如果您仍然無法使其工作，請嘗試給它一個'alignItems'樣式，就像我在上面的示例中那樣。

有了這個代碼，你可以做這樣的事情：代碼

上面的截圖