React-Native-Elements 工具提示不起作用答案

【问题标题】：React-Native-Elements Tooltip non functionalReact-Native-Elements 工具提示不起作用
【发布时间】：2022-07-15 19:54:34
【问题描述】：

我正在尝试将工具提示组件添加到我的 react native 项目中，我安装了 React Native Elements 来执行此操作。我知道它安装正确，因为 Divider 组件工作得非常好。但是由于某种原因，工具提示似乎无法正常工作，没有错误，但是当我点击工具提示时它根本没有做任何事情。

我的整个组件都在这里：

import React from 'react';
import {
    StyleSheet,
    View,
    TouchableOpacity,
} from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { Tooltip, Text } from "@rneui/themed";

import {Colors} from './Colors';

const InfoTooltip = ({ label, info='' }) => {

    return (
        <View style={styles.inputLine}>
            { info != '' &&
                <Tooltip popover={<Text>Tooltip Info</Text>}>
                    <Text>Press</Text>
                </Tooltip>
            }
            { info === '' &&
                <Text style={styles.inputLabel}>{label}:</Text>
            }
        </View>
    );
};

const styles = StyleSheet.create({

  inputLine: {
    flex: 1,
    flexDirection: 'row',
  },

    inputLabel: {
        color: Colors.Dove_Gray,
        marginTop: 2,
        fontSize: 14,
    },

    infoText: {
        color: Colors.Silver,
        fontSize: 12,
    },

});

export default InfoTooltip;

我正在 iOS 上对其进行测试，我看到显示“Press”的文字，但是当点击时，没有任何反应，没有弹出窗口，没有错误。

当将 visible 设置为 true 时，工具提示会在我第一次渲染应用时显示，但它会锁定应用，我无法再点击任何内容或滚动。

我不确定我做错了什么，谢谢！

【问题讨论】：

参考迁移指南

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

【解决方案1】：

从 React Native Elements 4.0 版开始，Tooltip 是无状态的。这意味着您需要使用 useState。您应该声明一个变量，例如：

const [open, setOpen] = useState(false);

并包括 visible、onOpen 和 onClose 使其工作的道具：

  <Tooltip
    visible={open}
    onOpen={() => {
       setOpen(true);
    }}
    onClose={() => {
       setOpen(false);
    }}
    popover="This is the popover text"
  />

更多信息请关注Migration Guide。

【讨论】：