reactjs - 在带有 typescript 的 react-native 中使用 createRef？

Question

我试图弄清楚我需要如何使用React.createRef()typescript 来反应本机，因为以下代码会引发错误

 // ...

  circleRef = React.createRef();

  componentDidMount() {
    this.circleRef.current.setNativeProps({
      someProperty: someValue
    });
  }

  // ...

当前引发以下错误this.circleRef.current.setNativeprops

[ts] 对象可能为“空”。（属性）React.RefObject<{}>.current: {} | 无效的

和

[ts] 类型“{}”上不存在属性“setNativeProps”。任何

有任何想法吗？

Answer 1

第一个问题可以在继续执行逻辑之前通过空检查来解决，因为React.createRef()也可以返回null：

componentDidMount() {
  if(this.circleRef !== null && this.circleRef.current !== null) {
    this.circleRef.current.setNativeProps({
      someProperty: someValue
    });
  }
}

第二个是通过传递要为其创建引用的 Node 元素的类名来解决的。例如，如果您引用的元素是 a <Text>，则执行以下操作：

circleRef = React.createRef<Text>();

这样，当且仅当引用的组件由本机视图直接支持时circleRef，才会正确键入并setNativeProps存在：

[of current] 方法在 React Native 提供的大多数默认组件上都可用。但是请注意，它们在不直接由本机视图支持的复合组件上不可用。这通常包括您在自己的应用程序中定义的大多数组件。-直接操作 - React Native 文档

Answer 2

您可以像这样将 Typescript 类型添加到 React Native Ref：

const textInputRef: React.RefObject<TextInput> = React.createRef();