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")}
/>

有关更多信息，请检查docs here

图片使用flex恢复文本

1 个答案: