如何在打字稿中使用 react-native-root-toast 作为组件

Question

我正在使用 Typescript 开发 React Native 项目，并希望将 react-native-root-toast 创建为组件，这是我的组件代码：

import React, { memo, useEffect, useState } from "react";
import Toast from "react-native-root-toast";

interface Props {
  message: string;
  shadow?: boolean;
  textColor?: string;
}

const Component = ({ message, shadow, textColor }: Props) => {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    setTimeout(() => setVisible(true), 100);
    setTimeout(() => setVisible(false), 5000);
  }, []);

  return (
    <Toast
      visible={visible}
      position={105}
      textColor={textColor || "black"}
      shadow={shadow}
      animation={false}
      hideOnPress
    >
      {message}
    </Toast>
  );
};

Component.defaultProps = {
  shadow: true,
};

export default memo(Component);

这就是我调用组件的方式

const _btnAction = () => {
    return (
      <Toast
        message={`${product.name} (${product.colorname}, ${findSizeName(
          form.size
        )}, ${form.qty}pcs) has been added to your cart.`}
      />
    );
  };

...
...
...
<Button onPress={_btnAction} />

但它不起作用，在 Typescript 中创建 react-native-root-toast 作为组件的正确方法是什么？？

干杯！

Answer 1

试试这样的：

const Toaster = ({}) => {
  const [visible, setVisible] = useState(false);

  useEffect(() => if (visible) setTimeout(() => setVisible(false), 3000), [visible]);

  return <>
    {children(() => setVisible(true))}
    {visible ? <Toast ... /> : null}
  </>
};

const App = () => {
  return <Toaster>
    {toast => <Button onPress={toast} />}
  </Toaster>;
};