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