Question

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

在CSS中我会使用background-position，但在React Native中不支持它。我觉得我已经尝试过resizeMode，绝对定位等各种组合 - 但仍然无法弄明白。

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

Answer 1

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

react-native-scalable-image

希望有帮助！

Answer 2

如果可以获取图像的高度 h ，则可以先显示完整图像，然后使用静态高度的视图容器（例如）隐藏底部。 250 ：

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

Answer 3

  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>

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

3 个答案: