react-native-render-html - 如何将 RenderHTMLSource 中的自定义道具传递给 react-native-render-html 中的自定义渲染器？

Question

我有一个名为的组件RenderHtml，它呈现我的 html：

    <RenderHTMLSource
        contentWidth={width * 0.8}
        source={{html: props.html}}
    />

还有一个img看起来像这样的自定义渲染器：

            <Touchable
                onPress={() => props.???}
            >
                <Image src={props.tnode.attributes.src} />
            </Touchable>

我想RenderHtml从 Touchable 的 onPress 方法中调用一个函数。有没有办法将回调传递给自定义渲染器？

Answer 1

有两种常见的技术：

1. 支柱钻孔renderersProps

渲染HTML

const renderersProps = useMemo(() => ({img: {onPress: (uri) => /*do whatever*/ }}), [/*Don't forget deps here*/]);
<RenderHTML
  contentWidth={width * 0.8}
  renderersProps={renderersProps}
  source={{html: props.html}}
/>

自定义渲染器

const {onPress} = useRendererProps('img');
return (
  <Touchable onPress={() => onPress(props.tnode.attributes.src)}>
    <Image src={props.tnode.attributes.src} />
  </Touchable>
);

使用打字稿时

您需要扩充模块以包含新的渲染器道具：

declare module 'react-native-render-html' {
  interface RenderersProps {
    img: {
      onPress: (source: string) => void;
    };
  }
}

2.反应上下文

参考 React 官方文档。