在 React Native 中将图像垂直锚定到其顶部答案

【问题标题】：Vertically anchor an image to its top in React Native在 React Native 中将图像垂直锚定到其顶部
【发布时间】：2018-01-01 16:58:22
【问题描述】：

我有一些代码可以将随机大小的图像扩展到容器的整个宽度 + 容器内的垂直中心。但我需要的是把它固定在顶部。

在 CSS 中我会使用背景位置，但在 React Native 中不支持。我觉得我已经尝试了 resizeMode、绝对定位等的所有组合 - 但仍然无法弄清楚。

<View style={{
  flex: 1,
  height: 120,
}}>
  <Image source={{uri: source}} style={{
    flex: 1,
    width: '100%',
    resizeMode: 'cover'
  }}>
  </Image>
</View>

【问题讨论】：

你试过justifyContent: 'top'吗？
@MendyK 此属性没有值“顶部”。最接近的是“flex-start”，我没有单独做这个把戏
@GuillaumeGuillaume 你找到解决方案了吗？
我也在寻找（顶部）对齐图像的解决方案。你找到办法了吗？
我仍在寻找 2020 年的解决方案.. 有什么消息吗？

标签： react-native

【解决方案1】：

在 React Native 中仍然没有像在常规 css 中那样锚定图像的标准方法，这似乎很疯狂（至少如果有的话，我还没有找到它）。但是这个库对我有用：

react-native-scalable-image

希望对你有帮助！

【讨论】：

【解决方案2】：

如果你可以得到图像的高度h，那么你可以先显示完整的图像，然后用静态高度的视图容器隐藏底部，例如。 250：

<View style={{ height: 250 }}>
  <Image source={{ uri: source }} style={{ width: null, height: h }} />
</View>

【讨论】：

【解决方案3】：

我找到了一个技巧来做到这一点

您需要将所需高度包装在 View 中，并隐藏溢出并在图片样式中设置大高度

const WANTED_HEIGHT = 170
<View style={{ height: WANTED_HEIGHT, overflow: 'hidden' }}>
        <Image
          source={{ uri }}
          style={{
            width: '100%',
            height: 500,
          }}
        />
      </View>

【讨论】：

【解决方案4】：

  return (
          <View
            style={{
              flex: 1,
              height: 120,
              justifyContent: "center",
              alignContent: "center"
            }}
          >
            <TouchableOpacity onPress={() => alert("Hello ")}>
              <Text style={{ alignSelf: "center" }}>Anchor Tag</Text>
            </TouchableOpacity>
            <Image
              source={{
                uri: "https://shoutem.github.io/img/ui-toolkit/examples/image-3.png"
              }}
              style={{
                width: "100%",
                height: 100,
                resizeMode: "cover"
              }}
            />
          </View>

【讨论】：

谢谢！但这实际上不是我想要的结果。图像的可见部分是它的垂直中心，但我想要垂直顶部，也就是天空的部分