Javascript 我出错的原因：Can'；t显示弹出窗口。在React Native中使用UIManager.showPopupMenu（）方法时，找不到标记为XXX的视图

大家好

我想使用

UIManager.showPopupMenu（）

方法在Android中显示本机弹出菜单，但出现了一个错误

无法显示弹出菜单。在文档中找不到带有标记XXX的视图。该方法的第一个参数应使用
findNodeHandle（）
方法填充视图标记号

如果我使用的是
中的
ref
它可以正常工作，但是如果我使用的是
中的
ref
它就不工作了

我不知道我的代码出了什么问题，即使我尝试使用
ref callback
它仍然不能像
handlePopupRef.current=ref}>

代码示例

Icon.tsx

import React, {forwardRef, RefAttributes} from 'react';
import {View, StyleProp, TextStyle} from 'react-native';
import Icon from 'react-native-vector-icons/Feather';

interface IconHelperProps {
  name?: string;
  size?: number;
  color?: string;
  style?: StyleProp<TextStyle>;
}

const IconHelper: React.ForwardRefExoticComponent<
  IconHelperProps & RefAttributes<null>
> = forwardRef((props, ref) => {
  return (
    <View ref={ref}>
      <Icon
        name={props.name || 'help-circle'}
        size={props.size || 24}
        color={props.color || '#242424'}
        style={[props.style]}
      />
    </View>
  );
});

export default IconHelper;

import React, {useRef, useState} from 'react';
import {
  Pressable,
  UIManager,
  findNodeHandle,
  StyleProp,
  TextStyle,
  ViewStyle,
} from 'react-native';
import Icon from './Icon';
import Text from './Text';

export interface ButtonHelperProps {
  title?: string;
  iconName?: string;
  iconSize?: number;
  iconColor?: string;
  isDropdown?: boolean;
  dropdownMenu?: string[];
  style?: StyleProp<ViewStyle>;
  textStyle?: StyleProp<TextStyle>;
  onPress?: () => void;
  onPressDropdownMenu?: (i: number | undefined) => void;
}

const Button: React.FC<ButtonHelperProps> = props => {
  const {title, iconName, isDropdown} = props;
  const [bgColor, setBgColor] = useState('transparent');
  const handlePopupRef = useRef(null);

  return (
    <Pressable
      onPressIn={() => {
        setBgColor('#E3E3E7');
      }}
      onPress={() => {
        if (isDropdown) {
          UIManager.showPopupMenu(
            findNodeHandle(handlePopupRef.current),
            props.dropdownMenu || ['Sample Menu'],
            error => {
              console.log(error);
              console.error('Error Show Popup');
            },
            (e, i) => {
              props.onPressDropdownMenu?.(i);
            },
          );
        } else {
          props.onPress?.();
        }
      }}
      onPressOut={() => {
        setBgColor('transparent');
      }}
      style={[
        {
          backgroundColor: bgColor,
          borderRadius: title ? 8 : 0,
          flexDirection: 'row',
          alignItems: 'center',
        },
        props.style,
      ]}
    >
      // It's work fine when I am using a Ref from Pressable component
      {/* {isDropdown && <Pressable ref={handlePopupRef}></Pressable>} */}

      // But it doesn't work when I am using a Ref from View component
      {iconName && (
        <Icon
          name={iconName}
          size={props.iconSize}
          color={props.iconColor}
          ref={ref => (handlePopupRef.current = ref)}
        />
      )}

      {title && (
        <Text
          size={14}
          bold
          style={[
            {
              paddingHorizontal: 24,
              paddingVertical: 12,
            },
            props.textStyle,
          ]}
        >
          {title}
        </Text>
      )}
    </Pressable>
  );
};

export default Button;

import React，{forwardRef，RefAttributes}来自'React'；
从“react native”导入{View，StyleProp，TextStyle}；
从“反应本机矢量图标/羽毛”导入图标；
接口IconHelperProps{
名称？：字符串；
大小？：数字；
颜色？：字符串；
style？：StyleProp；
}
常量IconHelper:React.ForwardRefExoticComponent<
IconHelperProps和重新描述
>=转发参考（（道具，参考）=>{
返回(
);
});
导出默认IconHelper；

按钮。tsx

import React, {forwardRef, RefAttributes} from 'react';
import {View, StyleProp, TextStyle} from 'react-native';
import Icon from 'react-native-vector-icons/Feather';

interface IconHelperProps {
  name?: string;
  size?: number;
  color?: string;
  style?: StyleProp<TextStyle>;
}

const IconHelper: React.ForwardRefExoticComponent<
  IconHelperProps & RefAttributes<null>
> = forwardRef((props, ref) => {
  return (
    <View ref={ref}>
      <Icon
        name={props.name || 'help-circle'}
        size={props.size || 24}
        color={props.color || '#242424'}
        style={[props.style]}
      />
    </View>
  );
});

export default IconHelper;

import React, {useRef, useState} from 'react';
import {
  Pressable,
  UIManager,
  findNodeHandle,
  StyleProp,
  TextStyle,
  ViewStyle,
} from 'react-native';
import Icon from './Icon';
import Text from './Text';

export interface ButtonHelperProps {
  title?: string;
  iconName?: string;
  iconSize?: number;
  iconColor?: string;
  isDropdown?: boolean;
  dropdownMenu?: string[];
  style?: StyleProp<ViewStyle>;
  textStyle?: StyleProp<TextStyle>;
  onPress?: () => void;
  onPressDropdownMenu?: (i: number | undefined) => void;
}

const Button: React.FC<ButtonHelperProps> = props => {
  const {title, iconName, isDropdown} = props;
  const [bgColor, setBgColor] = useState('transparent');
  const handlePopupRef = useRef(null);

  return (
    <Pressable
      onPressIn={() => {
        setBgColor('#E3E3E7');
      }}
      onPress={() => {
        if (isDropdown) {
          UIManager.showPopupMenu(
            findNodeHandle(handlePopupRef.current),
            props.dropdownMenu || ['Sample Menu'],
            error => {
              console.log(error);
              console.error('Error Show Popup');
            },
            (e, i) => {
              props.onPressDropdownMenu?.(i);
            },
          );
        } else {
          props.onPress?.();
        }
      }}
      onPressOut={() => {
        setBgColor('transparent');
      }}
      style={[
        {
          backgroundColor: bgColor,
          borderRadius: title ? 8 : 0,
          flexDirection: 'row',
          alignItems: 'center',
        },
        props.style,
      ]}
    >
      // It's work fine when I am using a Ref from Pressable component
      {/* {isDropdown && <Pressable ref={handlePopupRef}></Pressable>} */}

      // But it doesn't work when I am using a Ref from View component
      {iconName && (
        <Icon
          name={iconName}
          size={props.iconSize}
          color={props.iconColor}
          ref={ref => (handlePopupRef.current = ref)}
        />
      )}

      {title && (
        <Text
          size={14}
          bold
          style={[
            {
              paddingHorizontal: 24,
              paddingVertical: 12,
            },
            props.textStyle,
          ]}
        >
          {title}
        </Text>
      )}
    </Pressable>
  );
};

export default Button;

import React，{useRef，useState}来自“React”；
进口{
可按，
行政经理，
findNodeHandle，
StyleProp，
文本样式，
视图样式，
}从“反应本机”；
从“./Icon”导入图标；
从“./Text”导入文本；
导出接口按钮Helprops{
标题？：字符串；
iconName？：字符串；
iconSize？：数字；
iconColor？：字符串；
isDropdown？：布尔值；
下拉菜单？：字符串[]；
style？：StyleProp；
textStyle？：StyleProp；
onPress？：（）=>无效；
onPressDropdownMenu？：（i:number |未定义）=>void；
}
常量按钮：React.FC=props=>{
const{title，iconName，isDropdown}=props；
const[bgColor，setBgColor]=useState（'transparent'）；
const handlePopupRef=useRef（null）；
返回(
{
setBgColor（“#e3e7”）；
}}
onPress={（）=>{
if（isDropdown）{
UIManager.showPopupMenu(
findNodeHandle（handlePopupRef.current），
props.dropdown菜单| |['Sample Menu']，
错误=>{
console.log（错误）；
console.error（“错误显示弹出窗口”）；
},
（e，i）=>{
道具。按下拉菜单？（i）；
},
);
}否则{
props.onPress？（）；
}
}}
onPressOut={（）=>{
setBgColor（“透明”）；
}}
风格={[
{
背景颜色：bgColor，
边界半径：标题？8:0，
flexDirection:'行'，
对齐项目：“居中”，
},
道具，风格，
]}
>
//当我使用可按组件的引用时，它工作正常
{/*{isDropdown&}*/}
//但当我使用Ref-from-View组件时，它不起作用
{iconName&&(
（handlePopupRef.current=ref）}
/>
)}
{标题&&(
{title}
)}
);
};
导出默认按钮；