Question

我有如下代码：

  <View style={styles.logoContainer}>
    <View style={styles.logoTextContainer}>
      <Text style={styles.logoText}>{siteName}</Text>
    </View>
    <View style={styles.logoImageContainer}>
      <Image source={logo} style={styles.logo} resizeMode="contain" />
    </View>
  </View>

相关样式如下：

  logoContainer: {
    flex: 4,
    alignSelf: 'stretch',
    alignItems: 'center',
    justifyContent: 'space-evenly',
      // borderWidth: 1,
      // borderColor: 'blue',
  },
  logoImageContainer: {
    flex: 3,
    justifyContent: 'center',
      // borderWidth: 1,
      // borderColor: 'red',
  },
  logo: {
    width: 250,
    height: 250,
  },

问题是（正方形）图片无法缩放以适合容器内部（注释掉的边框是为了确保容器位于我认为的位置，并且尺寸合适-是的。

我已经看到了关于此的各种问题-有些与远程图像有关，而不是这里的情况。其他建议：

将resizeMode设置为Image元素的道具。
将resizeMode设置为样式。
在样式中将宽度设置为“ undefined”时执行上述任一操作。
在样式中将宽度设置为“自动”时执行上述任一操作。

没有任何改变，唯一起作用的是专门设置宽度和高度，如上面的代码所示。在较新的（已阅读：较大的）iPhone sims上看起来不错，但会导致图像与iPhone 5 sim上的其他内容重叠。

要检查resizeMode属性是否有效，我将其设置为“ center”（没有宽度或高度样式）。这更有希望，因为图像现在仅比屏幕宽。但是，它仍然比视图高得多，这与resizeMode：center：

上的文档矛盾

center：将图像在视图中沿两个维度居中。如果图像大于视图，将其均匀缩小以使其包含在视图中。

尝试将width = auto / undefined添加到resizeMode =“ center”，将导致图像根本无法显示。

logoImageContainer是一个已定义的大小（通过flexbox定义），我只希望图像缩放并居中以适合其中。

反应原生，图像不缩放-resizeMode没有有用的效果

0 个答案: