css - React-native 使用 flexbox 定义组件高度

Question

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

这是代码:

    return (
      <View style={{flex: 1, flexDirection: 'row', justifyContent: "center"}} key={location.id}>
        <Text style={{width: "80%", height: 20}}>{location.name}</Text>
        <Button
          style={{width: "20%", height: 20}}
          title="x"
          onPress={() => this.removeLocationFromDevice(location)}
        />
      </View>
    )

这是结果:

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

Answer 1

您可以将初始 View 设置为 flex 1 并将按钮+文本包装在另一个 View 中

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>
);