在 React Native 中使用 onMouseEnter 在图像上方添加文本

Question

我希望当我的鼠标悬停在图片上方时，文字会出现在图片上方。我尝试了一些东西，但 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>

Answer 1

你可以使用钩子来设置图像显示，当鼠标进入时你设置你的钩子为真当鼠标离开你设置为假

  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>
    )

在 React Native 中使用 onMouseEnter 在图像上方添加文本

Adding text above an image with onMouseEnter in React Native

mouse

hover

typescript

reactjs

react-native