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;
- 配置 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 希望大家能解决好基础问题
