React Native - 使用resizeMode垂直对齐图像＆＃34;包含＆＃34;

Question

当图像具有调整大小模式时，＃34;包含＆＃34;它似乎在中心对齐/证明实际图像，但是图像内容在弹性开始时是对齐/对齐的。

<Image resizeMode="contain" ...>
<Text>Title</Text>
</Image>

以下我看到文字出现在图片上方。

有没有办法将包含的图像垂直对齐到顶部？

Answer 1

我能够使用以下代码模拟CSS backgroundPosition：

<View style={{ overflow: 'hidden' }}>
  <Image src={{ uri: imageURI }} style={{ height: /*adjust_as_needed*/, resizeMode: 'cover' }} />
</View>

由于视图上的溢出：'隐藏'，可以调整图像的高度，而无需查看图像的额外高度。你需要用户'覆盖'而不是'包含'用于调整大小模式，否则如果你将图像的高度设置得太大，你最终会得到一个不像View容器那样宽的居中图像

在下面的顶部示例中，图像高度（蓝色虚线）大于底部示例，因此图像的中心线在视图中位于较低位置。通过在第二个示例中减小图像的高度（蓝色虚线），图像的中心线在视图中向上移动。

希望这是有道理的，我希望它适用于您的用例;它为我做了：D

Answer 2

您需要在图像上使用样式来设置所需的垂直对齐方式。

var SampleApp = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Image source={{uri: "http://placekitten.com/300/505"}} style={styles.image}>
          <Text style={styles.instructions}>
            Hello !
            </Text>
        </Image>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'stretch',
    backgroundColor: '#F5FCFF',
  },
  image: {
    height: 500,
    justifyContent: "space-around",    //  <-- you can use "center", "flex-start",
    resizeMode: "contain",             //      "flex-end" or "space-between" here
  },
  instructions: {
    textAlign: 'center',
    color: 'white',
    backgroundColor: "transparent",
    fontSize: 25,
  },
});

有关正在运行的示例，请参阅https://rnplay.org/apps/9D5H1Q

Answer 3

使用resizeMethod="resize"

我找到了不需要任何额外标记或技巧的解决方案。只是一个道具。

利

我遇到了同样的问题，因为我的远程图像是常规尺寸的@ 3倍。并以{ height: 100, width: 300, resizeMode: 'contain' }样式值加载到手机后，它会自动居中。

示例

要修复此问题，我刚刚添加了道具resizeMethod，如下所示：

<Image
  style={{ height: 100, width: 300, resizeMode: 'contain' }}
  source={{ uri: 'https://www.fillmurray.com/900/300' }}
  resizeMode="contain"
  resizeMethod="resize"
/>

希望有帮助！

Answer 4

我需要做同样的事情。我发现实现这一目标的最佳方法是明确给出图像的高度或宽度。然后，通过将图像包装在另一个组件中，您可以使用justifyContent来完全控制图像的位置。

确实，您可能并不总是拥有图像的宽度或高度。但是，经常（特别是使用resizeMode：'contains'）你想要设置相对于某些东西的高度或宽度。我希望高度等于视口的宽度。这是我使用的解决方案：

<View style={{ flex: 1, justifyContent: 'flex-start' }}>
    <Image
      source={{ uri: imagePath }}
      resizeMode="contain"
      style={{ height: vw(100) }}
    />
 </View>

vw是一个来自this回答的辅助函数。

Answer 5

你需要在不设置的情况下修复另一个值。在大多数情况下，让宽度固定。小心使用父flex选项。它可能会改变你的设计。