reactjs - 如何在 React Native 中将 ref 从父级传递给子级 Touchable Opacity？

Question

我在父过渡 View 中有一个过渡引用，我想传递给 child :

const transition = (
  <Transition.Together>
    <Transition.In type="fade" durationMs={300} />
    <Transition.Change />
    <Transition.Out type="fade" durationMs={300} />
  </Transition.Together>
);
const FiltersModal: FC = () => {
const transitionRef = useRef<TransitioningView>(null);
return (
<FiltersContainer ref={transitionRef} transition={transition}>
 ...
{primaryFilters.map((primaryFilter, i) => (
    <FilterOption key={i} ref={transitionRef} label={primaryFilter}>
      {primaryFilter}
    </FilterOption>
  ))}

这是我的过滤器选项，遵循这里的回答:ForwardRef error with typescript and react-native :

const FilterOption: React.ComponentType<FilterOptionProps> = React.forwardRef(
  ({ label }: FilterOptionProps, ref?: React.Ref<TransitioningView>) => {
    const [isSelected, setiIsSelected] = useState(false);
    const onPress = () => {
      if (ref.current) ref.current.animateNextTransition();
      setiIsSelected((prevIsSelected) => !prevIsSelected);
    };
    if (isSelected) return null;
    return (
      <Button>
        <Typography
          {...{
            fontFamily: FONTS_MONTSERRAT_500,
            fontWeight: 500,
            fontSize: 14,
            fontStyle: "normal",
            lineHeight: 20,
            color: "#00B0F0",
          }}
        >
          {label}
        </Typography>
        <AntDesign name="plus" color="#00b0f0" size={10} />
      </Button>
    );
  }
);

但是我有这个警告并且不能引用 ref.current.:

Type 'ForwardRefExoticComponent<Pick<FilterOptionProps, "label"> & RefAttributes<TransitioningView>>' ....

我如何在 react native + typescript 的 touchableOpacity 中使用 forwardref？

Answer 1

这对我有用:

interface FilterOptionProps {
  label: string;
} 

const FilterOption: React.ForwardRefExoticComponent<
  FilterOptionProps & React.RefAttributes<TransitioningView>
> = React.forwardRef(({ label }, ref) => {
...

if((ref as React.RefObject<TransitioningView>).current)
(ref as React.RefObject<TransitioningView>).current.animateNextTransition()