React-native使用Flexbox定义组件高度

Question

我试图定义一个高度相同的元素列表，但结果是该组件占用了所有可用空间。

这是代码：

void*

这是结果：

如何确保按钮和文本元素的高度足以显示该元素，仅此而已？

Answer 1

您可以将初始视图设置为flex 1，然后将按钮+文本包装在另一个视图中

return (
  <View style={{flex: 1}} key='key'>
  <View style={{ flexDirection: 'row', justifyContent: "center"}}>
  <Text style={{width: "80%", height: 20}}>text</Text>
  <Button
    style={{width: "20%", height: 20}}
    title="x"
  />
  </View>
</View>
);