如何使用flexbox将React Native图像放入其容器中？

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

将flexDirection：'row'添加到imageContainer

Answer 2

尝试将resizeMode='contain'作为道具添加到您的图片中：

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

Answer 3

尝试将type A struct { Name string } type B struct { Name NameStruct } type NameStruct struct { Firstname string Lastname string } 放在imageContainer

上