Как правильно вставить корень изображения в контейнер с помощью flexbox?

Question

Его немой вопрос, но у меня проблема, что я пытаюсь поместить изображение в его контейнер. Перетоков изображение ширина:

Код:

<View style = {styles.imageContainer}> 
     <Image style={styles.img} source={require('./img_1.png')} /> 
     </View> 

     <View style={styles.banner}> 
     <ScrollView > 
      <Text>Hellp Boy</Text> 
      <Text>Hellp Boy</Text> 
      <Text>Hellp Boy</Text> 

     </ScrollView> 
     </View> 

и стайлинг Порция:

const styles = StyleSheet.create({ 

    imageContainer: { 
    backgroundColor : '#DB7093', 
    flex : 1, 
    padding : 10, 
    borderColor : '#7FFF00', 
    borderWidth : 10, 
    }, 
    img : { 
    flex : 1 , 
    resizeMode : 'stretch', 
    overflow : 'visible', 
    }, 
    banner: 
    { 
    flex : 2, 
    padding : 10, 
    borderColor : '#7FFF00', 
    borderWidth : 10, 
    }, 
}); 

Answer 1

Попробуйте добавить resizeMode='contain' в качестве опоры к изображению:

<Image style={styles.img} source={require('./img_1.png')} resizeMode='contain' /> 

Answer 2

попробовать положить transform: [{ scale: 1.0 }], на вашем imageContainer

Answer 3

Добавить flexDirection: 'строка', чтобы imageContainer