在 flexbox 中，为什么我的按钮似乎被压缩了？

Question

为什么我创建的按钮在使用 flexbox 时似乎被压缩了？

有没有办法让它变成中等大小？

render () {
  const listItems = this.state.content.map((data) => {
    return (
      <View>
        <Card>
          <Text h5>{data.TITLE}</Text> 
          <Text h5>{data.CONTENT}</Text>

          <View style={styles.container}>
            <Button title="Edit" onPress={this.editAnnouncement} containerStyle={{marginLeft: 10, width: 120}} />
            <Button title="Delete" onPress={this.editAnnouncement} containerStyle={{marginRight: 10, width: 120}} />
          </View>
        </Card>
      </View>
    )
})

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    padding: 15,
  },
});

Answer 1

我使用了 flexBasis 并将其设置为 40

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    flexBasis: 40,
    paddingTop: 10,
    paddingBottom: 10,
  },
});