Question

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

图像角落有一个按钮。无论图像的大小或宽高比如何，按钮始终位于图像的角落内，并且图像的任何部分都不会被剪裁（它总是按比例缩小以完全适合框内）。

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

这里是React Native的样子：

X是按钮的占位符。它被设置为锚定到视图的左上角，该视图是图像所属的同一视图的子视图。图像的backgroundColor设置为绿色，以演示图像组件的宽度如何与组件内部图片的宽度不同。

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

演示代码：

<View style={{ marginLeft: 7, marginRight: 7, backgroundColor: 'blue', }} > <View style={{ height: 300, flex: 1, }} > <Image source={imageSource} style={{ flex: 1, height: undefined, width: undefined, backgroundColor: 'green', }} resizeMode="contain" /> </View> <View style={{ position: 'absolute', right: 5, top: 5, backgroundColor: 'transparent', }} > <Text style={{ color: 'white' }}>X</Text> </View> </View>

Answer 1

不再支持来自具有嵌套内容的React-native v0.50.0 <Image>。请改用<ImageBackground>。

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

Answer 2

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

试试这个

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

this gist 是您需要的完整演示。

或者你可以在世博会上看到它：

<div data-snack-id="B1SsJ7m2b" data-snack-platform="ios" data-snack-preview="true" data-snack-theme="light" style="overflow:hidden;background:#fafafa;border:1px solid rgba(0,0,0,.16);border-radius:4px;height:505px;width:100%"></div>
<script async src="https://snack.expo.io/embed.js"></script>

Answer 3

正如@ObooChin所提到的，这样做的方法是使用Image.getSize（）来获取图像的实际大小，然后根据a）想要图像的最大空间生成高度和宽度拿起，和b）实际图像尺寸的纵横比。

string p =  Request.QueryString["value"];

尝试仍然有点粗糙，但我正在努力将其转换为一个库，您可以在其中指定最大高度，宽度和要使用的叠加层，并处理其余部分：{{3 }}

Answer 4

这是我的实现方式：

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <style type="text/css">
        body {
            background-color: rgba(25, 25, 25, 0.50);
            font-family: "Arial";

        }

        .tab {

            margin: 1px auto;
            width: 95%;
            height: 30px;
            background-color: white;
        }

        #title-header {
            /*display:inline-block;*/
            /*color: white;*/
            font-size: 25px;
            color: white;
            /*border-top: 1px solid white;*/
            /*border-bottom: 1px solid white;*/
            margin:0 auto;
            /*vertical-align: middle;*/
            text-align:center;
            /*white-space: nowrap;*/

        }

        .player-img {
            display: inline-block;
            /*width: 50px;*/

        }

        .player-name {
            display: inline-block;
            position: relative;
            bottom: 10px;
            color: white;
        }
    </style>
</head>
<body>

    <div id="title-header">
        <h1>SleekRP</h1>
    </div>

    <div class="main-scoreboard">
        <div class="tab">
            <div class="player-img">
                <img src="https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/fe/fef49e7fa7e1997310d705b2a6158ff8dc1cdfeb.jpg">
            </div>
            <p class="player-name">test</p>
        </div>

        <!-- <div class="tab"></div>
        <div class="tab"></div>
        <div class="tab"></div>
        <div class="tab"></div> -->
    </div>

    <script>
        var panels = [];

        function setTitle(title){
            document.getElementById("title-header").innerText = title
        }

        function isPlayerInScoreboard(name){
            for (var i=0; i<panels.length; i++){
                if (panels[i].getPlayerName() == name) {
                    return true
                }
            }
            return false
        }

        function updateScoreboard(plyInfo){
            if (!isPlayerInScoreboard(plyInfo.name)) {
                PlayerPanel(plyInfo)
            }
        }

        function PlayerPanel(plyInfo){
            // Create element
            var mainPanel = document.createElement('div')
            mainPanel.className = "tab"
            mainPanel.style.backgroundColor = "rgba(" + plyInfo.bgColor.r + ", " + plyInfo.bgColor.g + ", " + plyInfo.bgColor.b + ", 0.50)"
            document.getElementsByClassName("main-scoreboard")[0].appendChild(mainPanel)

            this.playerName2 = document.createElement('p')
            this.playerName2.innerText = plyInfo.name
            this.playerName2.className = "player-name"
            mainPanel.appendChild(this.playerName2)

            this.setPlayerName = function(name) {
                this.playerName2.innerText = name
            }

            this.updatebGColor = function(bgColor){
                mainPanel.style.backgroundColor = "rgba(" + bgColor.r + ", " + bgColor.g + ", " + bgColor.b + ", 0.50)"
            }

            this.getPlayerName = function() {
                return this.playerName2.innerText
            }
            panels.push(this)
        }
    </script>
</body>
</html>

这是它的样子：

React Native

4 个答案: