React Native中图像顶部的叠加按钮

Question

我试图在React Native中实现以下效果:

图像角落有一个按钮.无论图像的大小或纵横比如何,按钮始终位于图像的角落内,并且图像的任何部分都不会被剪裁(它总是按比例缩小以完全适合框内).

我在React Native中遇到的麻烦是Image组件的大小并不总是与图像的缩小尺寸相匹配.如果我将图像的高度固定为300,则设置flex 1以使图像的宽度扩展以填充其内容,并且图像为纵向,Image组件具有容器的整个宽度,但组件中的图像将具有宽度要少得多.因此,使视图覆盖另一个视图的典型方法不能像我希望的那样工作 - 我的覆盖也覆盖图像周围的填充,并且按钮(锚定到角落)出现在图像外部.

这是它在React Native中的样子:

X是按钮的占位符.它被设置为锚定到视图的左上角,该视图是图像所属的相同视图的子视图.图像的backgroundColor设置为绿色,以演示Image组件的宽度与组件内部图片的宽度之间的差异.

目标是无论其纵横比如何,X都将位于图像内部.我想我可以做一些基于抓取图像的尺寸和缩放图像组件的高度和宽度,但这听起来复杂和脆弱.这是否可以通过样式以响应方式实现？

演示代码:

__CODE__

Answer 1

从React-native v0.50.0开始<Image>,不再支持嵌套内容.请<ImageBackground>改用.

<ImageBackground
  source={imageSource}
>
    <View>
        <Text>×</Text>
    </View>
</ImageBackground>

Answer 2

这是我如何实现的：

import React, { Component } from "react";
import { View, Image, StyleSheet } from "react-native";
import { Ionicons } from "@expo/vector-icons";

class MyCard extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Image
          resizeMode="cover"
          style={styles.cover}
          source={{ uri: "https://picsum.photos/700" }}
        />
        <Ionicons style={styles.close} name="ios-close-circle" size={25} />
      </View>
    );
  }
}

export default MyCard;

const styles = StyleSheet.create({
  container: {
    margin: 5,
    width: 160,
    height: 200
  },
  cover: {
    flex: 1,
    borderRadius: 5
  },
  close: {
    margin: 5,
    position: "absolute",
    top: 0,
    left: 0,
    width: 25,
    height: 25,
    color: "tomato"
  }
});

这是它的样子：

Answer 3

更新于 2019 年 6 月 29 日

\n\n

现在（react-native@0.60-RC）有一个特定的组件将元素包装为图像背景，ImageBackground。去查看官方文档。

\n\n

以下要点已更改。

\n\n\n\n

原答案

\n\n

我们可以使用<Image/>显示图像，并且可以将其用作background-image黑客。

\n\n

尝试这个

\n\n

<Image\n  source={imageSource}\n>\n  <View>\n    <Text>\xc3\x97</Text>\n  </View>\n</Image>\n

\n\n

这个要点是满足您需求的完整演示。

\n\n

或者您可以在世博会上现场观看：

\n\n

\r\n

\r\n

<Image\n  source={imageSource}\n>\n  <View>\n    <Text>\xc3\x97</Text>\n  </View>\n</Image>\n

\r\n

\r\n

\r\n

\n