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

Posted 2023-03-13

【中文标题】如何为 react-native 本机 ui 组件创建打字稿类型定义？

【英文标题】：How do I create typescript type definitions for react-native native ui component?

【发布时间】：2020-03-20 23:53:15

【问题描述】：

假设我有一个像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 是一个布尔值？

【问题讨论】：

我很快就会查到它，但为什么不直接在 typescript 中编写组件呢？还是说项目是js还是ts不是你的决定？

@Elias 这是一个原生组件，用objective-c编写。

编辑了我的答案。应该差别不大

react-native native PureComponent 我们将如何获得原生：D

我之所以坚持写原生的ui组件（即react native的UIViews可以理解并用来组装视图）是因为RN没有3d库可以灵活&&工作RN 0.6 倍。所以我决定写我自己的，为了我自己的提议，为此，我必须了解如何创建原生 ui 视图。

【参考方案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

【参考方案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;

【讨论】：

我正在使用 react-native 0.61.4 但HostComponent 无法在“react-native”中解析。

@Rishabh876 HostComponent 应该从 v0.62 及更高版本开始提供