子视图在本机反应中移出父视图

Question

我有一个父<View>类型和一个子<Text>类型。如果文本值很大，则文本会移出容器视图。知道如何遏制它吗？PS 我不希望文本被修剪并后跟“...”，因为我需要向其添加动画并将其滚动回视图中。

Answer 1

为了解决这个问题，我建议使用flex。这是一个简单的例子：

<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和 the flexWrap:'wrap'，它告诉视图用完所有可用空间并将其子项包裹在自身周围。如果您仍然无法使其工作，请尝试为其提供“alignItems”样式，就像我在上面的示例中所做的那样。

使用此代码，您可以制作如下内容：

上面代码的截图