0

我的代码如下所示：

  <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 设置为样式。

  • 使用样式中的宽度为“未定义”执行上述任一操作。

  • 使用样式中的宽度为“自动”执行上述任一操作。

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

要检查 resizeMode 道具是否有任何效果，我将其设置为“中心”（没有宽度或高度样式）。这更有希望，因为图像现在只比屏幕宽一点。但是，它仍然比视图高得多，这与 resizeMode: center 上的文档相矛盾：

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

尝试将 width=auto/undefined 添加到 resizeMode="center"，会导致图像根本不显示。

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

4

0 回答 0