图像使用 flex 恢复文本答案

【问题标题】：Images recover text using flex图像使用 flex 恢复文本
【发布时间】：2019-08-11 08:53:28
【问题描述】：

我无法理解 React Native 中的图像管理。我已经按照教程进行操作，例如 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",
  }

你知道我做错了什么以及如何将图像限制在由 flex ratio 定义的区域吗？

【问题讨论】：

标签： react-native layout flexbox

【解决方案1】：

resizeMode 是 Image 组件的一个属性。像这样使用它

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

更多信息请查看docs here

【讨论】：

如果我在图像组件中集成 resizeMode='contain' 会得到相同的结果