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...}>

React-Native 工具提示问题

React-Native Tooltip Issue

tooltip

react-native

react-native-elements