React Native - 使用resizeMode“包含”垂直对齐图像

Question

当图像具有“包含”调整大小模式时，它似乎在中心对齐/对齐实际图像，但图像内容在 flex 开始时对齐/对齐。

<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 上的 overflow: 'hidden' 可以调整图像的高度，而不会看到图像的额外高度。对于调整大小模式，您还需要使用“覆盖”而不是“包含”，否则如果您将图像的高度设置得太大，您最终会得到一个不像 View 容器那么宽的居中图像.

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

Answer 2

使用resizeMethod="resize"

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

传说

我遇到了同样的问题，因为我在遥控器上的图像是@3x 常规尺寸。一旦使用 { 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 3

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

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 4

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

确实，您可能并不总是拥有图像的宽度或高度。然而，很多时候（尤其是使用 resizeMode: 'contain'）你想要设置相对于某物的高度或宽度。我希望高度等于视口的宽度。这是我使用的解决方案：

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

vw 是一个辅助函数，来自this 答案。

Answer 5

它非常简单。首先找到屏幕的高度：

const height = Dimensions.get('window').height

现在转到您的样式属性并将 ma​​rginVertical 属性设置为 (height / 4)：

<Image source = {// some url} resizeMode = 'contain' style = {width: '100%', height: height/2, marginVertical: height/4}

现在您的图像将垂直居中。

Answer 6

我刚遇到同样的问题，建议的解决方案都不适合我。带有resizeMode="contain" 设置的图像始终居中并忽略外部容器的justifyContent 设置。

我设法通过将图像的width 和height 设置为undefined 并指定其aspectRatio 来“解决”这个问题：

    <View
      style={
          justifyContent: 'flex-end',
        }}
    >
      <Image
        source={require('./img/source.png')}
        style={{
          // This is as strange as it gets. The `flex-end` setting works _only_ if I pass the image's aspect ratio
          // and `undefined` for width and height properties. If any of these are missing, the image with `resizeMode="contain"
          // will be centered vertically and ignore the `justifyContent` setting of the outer container.
          aspectRatio: 0.5622, // In my case
          width: undefined,
          height: undefined,
          resizeMode: 'contain',
        }}
      />
    </View>

Answer 7

您需要修复一些值而不设置其他值。在大多数情况下，让宽度固定。小心使用父弹性选项。它可能会改变你的设计。