在图像上方添加文字，并在React Native中使用OnMouseenter

发布于 2025-02-04 09:14:02 字数 797 浏览 3 评论 0原文

当鼠标悬停在图像上方时，我想在图像上方有文本。我尝试了一些事情，但是OnMouseenter/Onmouseleave似乎是最有前途的。我遇到了一个错误：当我徘徊在图像上时，我的文字不在这里。这是我的代码：

          <View
            style={{
              flex: 1,
              justifyContent: "center",
            }}
          >
            <div
              onMouseEnter={() => {
                <Text>Hi here</Text>;
              }}
              onMouseLeave={() => {}}
            >
              <Image
                source={screen2}
                style={{
                  width: "80%",
                  height: "80%",
                  marginBottom: 150,
                  marginTop: 120,
                  marginLeft: "-10%",
                }}
              />
            </div>
          </View>

原文

I want to have text apear above my image when my mouse hover over it. I tryed some things, but the onMouseEnter/onMouseLeave seems the most promising. Howether I encountered an error:
When I hover over my image, my text is not here. Here is my code :

          <View
            style={{
              flex: 1,
              justifyContent: "center",
            }}
          >
            <div
              onMouseEnter={() => {
                <Text>Hi here</Text>;
              }}
              onMouseLeave={() => {}}
            >
              <Image
                source={screen2}
                style={{
                  width: "80%",
                  height: "80%",
                  marginBottom: 150,
                  marginTop: 120,
                  marginLeft: "-10%",
                }}
              />
            </div>
          </View>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

森末i 2025-02-11 09:14:03

您可以使用钩子设置图像显示，当鼠标输入时，您将钩子设置为true时，当鼠标留下您设置为false时

  const [show, setShow] = useState(false)
    return (
        <View
            style={{
                flex: 1,
                justifyContent: "center",
            }}
        >
            {show && <text>My text headers</text>}
            <div
                onMouseEnter={() => setShow(true)}
                onMouseLeave={() => setShow(false)}
            >
                <Image
                    source={screen2}
                    style={{
                        width: "80%",
                        height: "80%",
                        marginBottom: 150,
                        marginTop: 120,
                        marginLeft: "-10%",
                    }}
                />
            </div>
        </View>
    )

You can use an hook to set the image show, when the mouse enter you set your hook for true when the mouse leave you set to false

  const [show, setShow] = useState(false)
    return (
        <View
            style={{
                flex: 1,
                justifyContent: "center",
            }}
        >
            {show && <text>My text headers</text>}
            <div
                onMouseEnter={() => setShow(true)}
                onMouseLeave={() => setShow(false)}
            >
                <Image
                    source={screen2}
                    style={{
                        width: "80%",
                        height: "80%",
                        marginBottom: 150,
                        marginTop: 120,
                        marginLeft: "-10%",
                    }}
                />
            </div>
        </View>
    )

回复收藏 0 原文

~没有更多了~