React Native Flexbox Изображение не будет заполнять ширину контейнера

Question

У меня есть гибкий контейнер, который содержит 3 компонента, выложенных в стиле столбцов. Ожидаемое поведение будет состоять в том, что эти 3 компонента будут занимать высоту в соответствии с их стилями гибкости (что они и делают) и что они будут растягиваться, чтобы заполнить ширину их контейнера (что текстовые компоненты делают, но компонент изображения делает не!). Почему компонент изображения не растягивается, чтобы заполнить ширину? Я что-то упускаю?

Стили:

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 должен делать то же самое, но реакция-native flexbox не является точной копией поведения flexbox).