React-Native 工具提示问题答案

【问题标题】：React-Native Tooltip IssueReact-Native 工具提示问题
【发布时间】：2021-10-03 09:12:32
【问题描述】：

我正在尝试为 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 中的任何其他工作工具提示，您尝试过并看到它最近正在工作？

【问题讨论】：

我用的是同版本的，没遇到过这个问题。可能在您的布局或其他视图上？
@heathkev 这就是我上面的所有内容，此组件中没有其他布局或视图。你能试试上面的代码吗？

标签： react-native tooltip react-native-elements

【解决方案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...}>

【讨论】：