RN 动态填充多个标签：利用 Flexbox 实现自适应布局

在 React Native 中，可以使用 Flexbox 布局来动态填充多个标签。具体步骤如下：

1. 在容器的样式中设置 flexDirection 为 'row' 或 'column'，来指定标签的排列方向。
2. 使用 flex 属性来设置标签在容器中的比例。例如，如果有两个标签，可以设置一个标签的 flex 为 1，另一个标签的 flex 为 2，表示后者占据容器中的一半空间。
3. 使用 alignItems 和 justifyContent 属性来设置标签的对齐方式和间距。例如，可以使用 alignItems: 'center' 和 justifyContent: 'space-between' 来让标签在容器中居中对齐，并且在它们之间留有空间。
4. 如果需要动态调整标签的大小以适应容器高度，可以使用 flexWrap 属性来设置标签是否可以换行。例如，如果设置 flexWrap: 'wrap'，则标签会自动换行，并根据容器高度调整大小。

下面是一个示例代码：

<View style={{flexDirection: 'row', height: 200, alignItems: 'center', justifyContent: 'space-between'}}>
  <View style={{backgroundColor: 'red', flex: 1, height: 50}}></View>
  <View style={{backgroundColor: 'blue', flex: 2, height: 100}}></View>
  <View style={{backgroundColor: 'green', flex: 1, height: 50}}></View>
</View>

该代码会在一个高度为 200 的容器中，动态填充三个标签。其中，红色标签和绿色标签的高度为 50，蓝色标签的高度为 100。由于容器高度为 200，因此蓝色标签会自动缩小到适合容器大小。同时，三个标签会在容器中居中对齐，并且在它们之间留有空间。