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

您可以將初始視圖設置為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>
);