React-本机工具提示问题

gdx19jrr 于 2023-03-19 发布在 React

关注(0)|答案(2)|浏览(107)

我试图为react-native找到一个简单的工具提示，但是我找不到任何一个。所有的工具提示都有很多很多的bug。我想在“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你尝试，并看到它是最近工作？

react-native

来源：https://stackoverflow.com/questions/69423509/react-native-tooltip-issue

2条答案

按热度按时间

qpgpyjmq1#

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

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

赞(0）回复(0）举报 2023-03-19

vs91vp4v2#

有了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>
    );
};

赞(0）回复(0）举报 2023-03-19

我来回答

React-本机工具提示问题

2条答案

相关问题

热门标签

最新问答