Question

我正在尝试找出我需要如何使用React.createRef()来与打字稿进行本机反应，因为以下代码会引发错误

 // ...

  circleRef = React.createRef();

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

  // ...

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

[ts]对象可能为'null'。（属性） React.RefObject <{}>。current：{} |空

和

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

有什么想法吗？

Answer 1

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

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

Answer 2

由于React.createRef()也可以返回null，因此可以在进行逻辑运算之前用空检查解决第一个问题：

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

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

circleRef = React.createRef<Text>();

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

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

在带有原生脚本的react-native中使用createRef？

2 个答案: