React Native Flexbox Image不会填充容器的宽度

Question

我有一个灵活的容器，其中包含3个以column-flex样式布局的组件。预期的行为是这三个组件会根据它们的弹性样式（他们这样做）占据高度，并且它们会伸展以填充其容器的宽度（文本组件的宽度，但图像组件没有！）。为什么图像组件不会拉伸以填充宽度？我错过了什么吗？

样式：

let styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
    backgroundColor: 'white',
    borderRadius: 20,
    flexDirection: 'column'
  },
  profileImage: {
    flex: 3,
    backgroundColor: 'red',
    alignSelf: 'stretch'
  },
  usernameText: {
    fontSize: 24,
    fontWeight: 'bold',
    flex: 1,
    backgroundColor: 'red',
  },
  detailText: {
    fontSize: 14,
    color: 'gray',
    flex: 1
  }
});

结构：

<View style={styles.container}>
    <Image style={styles.profileImage} resizeMode={Image.resizeMode.stretch} source={profileImageSource}></Image>
    <Text style={styles.usernameText}>{this.props.person.username}</Text>
    <Text style={styles.detailText}>{this.props.person.age} - {this.props.person.gender} - {this.props.person.compat}% Pizza Rating</Text>
</View>

结果：

Answer 1

您是否尝试过添加

alignItems: 'stretch'

到容器样式？ （理论上，alignSelf与profileImage应该相同，但react-native flexbox不是flexbox行为的精确副本。）