reacr-native 0.76 新架构正式全面更新了Turb

RN 0.76 与原生的交互方式彻底的改变了, 看了下现在大家的帖子国内还没有人写与原生交互的东西
研究下了官方文档和之前理解的原理 自己试了下 今天跑通了
今天把demo贴出来 希望可以做个参考
JSBridge时代结束 开启了JSI 时代

下面是一个获取版本号的简单例子
首先 创建项目
我不是很推荐EXPO 虽然官方已经推荐使用EXPO
开发起来感觉中间又多了一层,所以我比较建议原生的创建RN 项目
npx @react-native-community/cli@latest init TurboModuleExample --version 0.76.0

React Native 提供了一个名为Codegen的工具，它接受用 TypeScript 或 Flow 编写的规范并生成适用于 Android 和 iOS 平台的特定代码。该规范声明了将在您的本机代码和 React Native JavaScript 运行时之间来回传递的方法和数据类型。Turbo Native 模块既是您的规范、您编写的本机代码，也是根据您的规范生成的 Codegen 接口。

这里个人的理解 不要迷信TS (其实编译的时候还是JS)

不是写给新手的 看不懂就自己多研究
1.在应用程序的根文件夹中，创建一个名为 的新文件夹specs。
2.创建一个名为 的新文件NativeLocalStorage.ts。

import type {TurboModule} from 'react-native';
import {TurboModuleRegistry} from 'react-native';

export interface Spec extends TurboModule {
  getAppVersion:()=>Promise<String>
}

export default TurboModuleRegistry.getEnforcing<Spec>(
  'NativeLocalStorage',
) as Spec;

3. 配置 Codegen
   package.json文件里配置

  "codegenConfig": {
     "name": "NativeLocalStorageSpec",
     "type": "modules",
     "jsSrcsDir": "specs",
     "android": {
       "javaPackageName": "com.nativelocalstorage"
     }
   },

4.编写 Turbo Native

import type {TurboModule} from 'react-native';
import {TurboModuleRegistry} from 'react-native';

export interface Spec extends TurboModule {
  getAppVersion:()=>Promise<String>
}

export default TurboModuleRegistry.getEnforcing<Spec>(
  'NativeLocalStorage',
) as Spec;

5.iOS的操作

cd ios
bundle install
bundle exec pod install

6.RCTNativeLocalStorage.h

#import <Foundation/Foundation.h>
#import <NativeLocalStorageSpec/NativeLocalStorageSpec.h>

NS_ASSUME_NONNULL_BEGIN

@interface RCTNativeLocalStorage : NSObject<NativeLocalStorageSpec>

@end

NS_ASSUME_NONNULL_END

RCTNativeLocalStorage.mm 使用方法最后写

#import "RCTNativeLocalStorage.h"
@interface RCTNativeLocalStorage()
@end



@implementation RCTNativeLocalStorage

RCT_EXPORT_MODULE(NativeLocalStorage);

- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:(const facebook::react::ObjCTurboModule::InitParams &)params {
  return std::make_shared<facebook::react::NativeLocalStorageSpecJSI>(params);
}

- (void)getAppVersion:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject
{
  NSString *version = [[[NSBundle mainBundle] infoDictionary] objectForKey:@"CFBundleShortVersionString"];//获取项目版本号
  
  resolve(@{@"appverision":version});
}

@end

下面是Android

cd android
./gradlew generateCodegenArtifactsFromSchema

public class NativeLocalStorageModule extends NativeLocalStorageSpec {
     static final String NAME = "NativeLocalStorage";
    public NativeLocalStorageModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return NAME;
    }

    @Override
    public void getAppVersion(Promise promise) {
        try {
            PackageInfo info = getPackageInfo();
            if (info != null) {
                promise.resolve(info.versionName);
            } else {
                promise.reject("");
            }
        } catch (IllegalViewOperationException e) {

        }
    }

    //    获取 APP 信息
    private PackageInfo getPackageInfo() {
        PackageManager manager = getReactApplicationContext().getPackageManager();
        PackageInfo info = null;
        try {
            info = manager.getPackageInfo(getReactApplicationContext().getPackageName(), 0);
            return info;
        } catch (Exception e) {
            e.printStackTrace();
        } finally {

            return info;
        }
    }
}

public class NativeLocalStoragePackage extends TurboReactPackage {

    @Override
    public NativeModule getModule(String name, ReactApplicationContext reactContext) {
        if (name.equals(NativeLocalStorageModule.NAME)) {
            return new NativeLocalStorageModule(reactContext);
        } else {
            return null;
        }
    }

    @Override
    public ReactModuleInfoProvider getReactModuleInfoProvider() {
        return new ReactModuleInfoProvider() {
            @NonNull
            @Override
            public Map<String, ReactModuleInfo> getReactModuleInfos() {
                Map<String, ReactModuleInfo> map = new HashMap<>();
                map.put(NativeLocalStorageModule.NAME, new ReactModuleInfo(
                        NativeLocalStorageModule.NAME,       // name
                        NativeLocalStorageModule.NAME,       // className
                        false, // canOverrideExistingModule
                        false, // needsEagerInit
                        false, // isCXXModule
                        true   // isTurboModule
                ));
                return map;
            }
        };
    }
}

最后不要忘记添加进模块

使用方法:

NativeSpac.getAppVersion().then((version)=>{
            console.log(version)
           })

到此代码的表现形式结束

代码不多 , 但是涉及的知识点非常多
iOS 安卓的环境配置问题 编译问题, 版本支持问题
这些都需要你有一定的基础才能搞定
双端在0.76的配置上都有很大的改变 我使用的是mac 希望大家能解决好基础问题