Изображения восстанавливают текст, используя flex

Question

У меня есть проблема, чтобы понять управление изображениями в реагировать родной. Я следовал инструкциям, таким как руководство Facebook, но у меня все еще есть проблемы:

Я хочу содержать изображения, а не их проливать и восстанавливать текст. Но изображения слишком велики и восстанавливают текст.

<View style={styles.s2}>
  <View style ={flex:1}>
     <Text> text for test </Text>
  </View> 
  <View style ={styles.s1}>
     <Image style ={styles.s2}
            source={require("./images/im1.png")}/>
     <Image style ={styles.container}
            source={require("./images/im2.png")}/>
  </View>
  <View style ={flex:1}>
     <Text> text for test </Text>
  </View> 
</View>
...
const styles = StyleSheet.create({
  s1: {
    flex: 0.3,
    flexDirection: 'row',
    alignItems: 'center',
  },
  s2: {
    flex: 1,
    alignItems: 'center',
    resizeMode: "contain",
  }

Знаете ли вы, что я делаю неправильно и как я могу ограничить изображения областью, определяемой коэффициентом изгиба?

Answer 1

resizeMode - это опора компонента Image. Используйте это так

<Image 
    resizeMode='contain'
    style ={styles.s2}
    source={require("./images/im1.png")}
/>

Для получения дополнительной информации проверьте документы здесь