React-Native 工具提示问题

Question

我正在尝试为 react-native 找到一个简单的工作工具提示，但我找不到。他们都有很多错误。我想在“react-native-elements/Tooltip”（版本 3.4.2）中描述一个问题，并要求提供一个有效的工具提示组件。

...
    render() {
        return (
            <View>
                <Text style={styles.pageTitle}>{this.props.messages.account}</Text>
                <View style={styles.horizontalFlex}>
                    <Text
                        style={styles.userInfo}>{this.props.messages.subscriptionModel}: {this.props.route.params.userProfile}
                    </Text>
                    <Tooltip popover={<Text>Info here</Text>}>
                        <EntypoIcon style={styles.infoIcon} name="info-with-circle" size={20} color={Colors.DARK_BLUE}/>
                    </Tooltip>
                </View>
            </View>
        );
    }
...

let styles = EStyleSheet.create({
    container: {
        flex: 1,
        flexDirection: "column",
    },
    pageTitle: {
        ...
    },
    userInfo: {
        textAlign: "left",
        justifyContent: "center",
        marginLeft: "20rem",
        color: Colors.DARK_BLUE,
        fontSize: "15rem",
        marginBottom: "10rem"
    },
    infoIcon: {
        paddingLeft: "20rem",
    },
    horizontalFlex: {
        flexDirection: "row"
    }
});
...

以上代码的输出如下：

不知何故，我放置工具提示的图标在上方滑动。不管是图标还是文本，都会出现同样的问题。我该如何解决？你知道你最近尝试过并看到它在工作的 react-native 中的任何其他工作工具提示吗？

Answer 1

我必须将 withOverlay 设置为 false 并将 skipAndroidStatusBar 设置为 true。这不是我需要的，但仍然可以接受。这是代码：

<Tooltip 
    popover={<Text style={...text style here...}>Change here</Text>}
    withOverlay={false}
    skipAndroidStatusBar={true}
    containerStyle={...container style here...}
    backgroundColor={...color...}>

Answer 2

有了native-base，tooltip可以在Android中使用。这是示例代码：

import React from "react";
import { Tooltip, Button, Center, NativeBaseProvider } from "native-base";

function Example() {

    const [tipShown, setTipShown] = React.useState(false);

    const buttonLongPressed = () => {
        setTipShown(!tipShown)
    }


    return <Center>
        <Tooltip label="Click here to read more" openDelay={500}
            isOpen={tipShown}>
            <Button onLongPress={buttonLongPressed}>More</Button>
        </Tooltip>
    </Center>;
}

export default () => {
    return (
        <NativeBaseProvider>
            <Center flex={1} px="3">
                <Example />
            </Center>
        </NativeBaseProvider>
    );
};