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 希望大家能解決好基礎問題
