如何为 react-native 本机 ui 组件创建打字稿类型定义？

Question

假设我有一个像this example 中的那样的原生原生 UI 组件。如何为其创建打字稿类型定义，例如可以导入的类型定义，例如使用“npm i @types/somelib”？我没有在文档中找到有关如何执行此操作的说明。

我们的想法是能够在 react-native typescript 项目中无缝使用原生组件，为此我需要为原生组件创建类型定义。那么，如何为原生组件创建 typescript 类型定义呢？

iOS/objc 方面

• FoobarView.h：

    #ifndef FoobarView_h
    #define FoobarView_h
    #import <UIKit/UIKit.h>
    #import <Foundation/Foundation.h>
    @interface FoobarView : UITextView
    @property (nonatomic, assign) BOOL teste;
    @end
    #endif

• FoobarView.m：

    #import "FoobarView.h"
    @implementation FoobarView
    -(void) setTeste:(BOOL)teste
    {
      if (teste == YES)
      {
        [self setText:@"é true"];
      }else
      {
        [self setText:@"é false"];
      }
    }
    -(BOOL)getTeste
    {
      if ([[self text] isEqual:@"é true"])
      {
        return YES;
      }else
      {
        return NO;
      }
    }
    @end

• FoobarManager.m

    #import <Foundation/Foundation.h>
    #import <React/RCTViewManager.h>
    #import "FoobarView.h"
    @interface FooManager : RCTViewManager
    @end
    @implementation FooManager
    RCT_EXPORT_MODULE(FoobarView)
    RCT_EXPORT_VIEW_PROPERTY(teste, BOOL)
    +(BOOL) requiresMainQueueSetup
    {
      return YES;
    }
    - (UIView*)view
    {
      FoobarView *v = [[FoobarView alloc]init];
      return v;
    }
    @end

所以，FoobarView 是一个原生的 iOS 视图，用 objc 编写。它不是一个反应原生的 ui 组件。我正在使用 UITextView 的简单后代，但它可以是任何东西，例如 SceneKit 视图。

要在 react native 的 javascript 端使用它，我在 FoobarView.js 中使用此代码：

import { requireNativeComponent } from 'react-native';
module.exports = requireNativeComponent('FoobarView');

最后，我可以在渲染块中使用 FoobarView：

    <FoobarView style={{width:'100%', height:30}} teste={true} />

我的问题是： 我如何定义 FoobarView，在 ios 中定义的东西，具有属性 teste，并且 teste 是一个布尔值？

Answer 1

对于低于 0.62 的 React 原生版本

确保像这样创建 .tsx 文件。

//FoobarView.tsx

import React, { ReactElement } from 'react'
import { requireNativeComponent, ViewProps } from 'react-native'

interface Props extends ViewProps {
    teste: boolean
}
const _FoobarView = requireNativeComponent('FoobarView')

const FoobarView = (props: Props): ReactElement<Props> => {
    return <_FoobarView {...props} style={props.style} />
}

export default FoobarView

灵感来自：https://shopify.engineering/creating-native-components-accept-react-native-subviews

Answer 2

我想对于主题启动器，我的回答有点晚了，但对于面临同样问题的其他人，我用这种方法解决了它：

import { requireNativeComponent, HostComponent } from 'react-native';

// Specify all your properties
interface Props {
  teste: boolean;
}

const FoobarView: HostComponent<Props> = requireNativeComponent('FoobarView');

module.exports = FoobarView;

TS 将仅识别 teste 属性，但在您的示例中，您还将 style 属性传递给组件，因此为了也支持它，您应该在上面的 Props 中明确指定它，例如

interface Props {
  teste: boolean;
  style: ViewStyle;
}

或者您可以扩展 View 属性（如果它们适合您的用例），例如

interface Props extends ViewProps {
  teste: boolean;
}