ReactNative: 使用AppReistry注册类

一、简介

每一个应用程序的运行都有一个入口文件或者入口函数，例如iOS中的使用UIApplicationMain类完成入口函数的实现，在React-Native中，AppRegistry类就肩负着这个责任。AppRegistry主要负责运行React-Native应用程序的JavaScript入口，注册根组件，注册的方式是AppRegistry.registerComponent()。当注册完应用程序组件后，Native系统(Objective-C)就会加载jsbundle文件并且触发AppRegistry.runApplication运用应用。

React-Native的注册入口函数示例如下：将组件ReactNativeDemo作为应用程序的根容器

AppRegistry.registerComponent('ReactNativeDemo', () => ReactNativeDemo);

AppRegistry.runApplication函数运行结果示例如下：

2019-12-16 14:20:35.806 [info][tid:com.facebook.react.JavaScript] Running application "ReactNativeDemo" with appParams: {"rootTag":1,"initialProps":{}}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF

通过console.log(AppRegistry.runApplication.toString())打印具体的AppRegistry.runApplication函数实现如下所示：

2019-12-16 15:23:26.043 [info][tid:com.facebook.react.JavaScript] function runApplication(appKey, appParameters) {
    var msg = 'Running application "' + appKey + '" with appParams: ' + JSON.stringify(appParameters) + '. ' + '__DEV__ === ' + String(__DEV__) + ', development-level warning are ' + (__DEV__ ? 'ON' : 'OFF') + ', performance optimizations are ' + (__DEV__ ? 'OFF' : 'ON');
    infoLog(msg);
    BugReporting.addSource('AppRegistry.runApplication' + runCount++, function () {
      return msg;
    });
    invariant(runnables[appKey] && runnables[appKey].run, 'Application ' + appKey + ' has not been registered.\n\n' + 'Hint: This error often happens when you\'re running the packager ' + '(local dev server) from a wrong folder. For example you have ' + 'multiple apps and the packager is still running for the app you ' + 'were working on before.\nIf this is the case, simply kill the old ' + 'packager instance (e.g. close the packager terminal window) ' + 'and start the packager in the correct app folder (e.g. cd into app ' + 'folder and run \'npm start\').\n\n' + 'This error can also happen due to a require() error during ' + 'initialization or failure to call AppRegistry.registerComponent.\n\n');
    FrameRateLogger.setContext(appKey);
    runnables[appKey].run(appParameters);
  }

二、API

//静态方法，进行注册配置
registerConfig(config: Array<AppConfig>)

//注册一个切片 
AppRegistry.registerSection(appKey, component)

//注册入口组件
registerComponent(appKey: string, component: ComponentProvider,  section?:boolean)

//注册监听函数，如果appKey不存在会报错。 
registerRunnable(appKey: string, run: Function)

//获取registerRunnable注册的监听键
getAppKeys()

//运行App，也即注册的对应的appKey入口组件
runApplication(appKey: string, appParameters: any)

//结束应用，不传参数默认结束appKeys中的第一个 
AppRegistry.unmountApplicationComponentAtRootTag(rootTag)

//执行对应的任务。第二个参数是一个方法，要求返回的是一个Promise对象 
AppRegistry.startHeadlessTask(taskId, taskKey, data)

//创建一个任务，这个线程不支持UI 
AppRegistry.registerHeadlessTask(taskKey, task)

三、使用

1、修改应用程序入口，也能正常启动APP

AppDelegate.m：

//此处我将之前的应用程序名称ReactNativeDemo修改为现在的MyApp
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"MyApp"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];

index.ios.js：

//此处我修改之前注册的应用程序名称reactNativeDemo为现在的MyApp
AppRegistry.registerComponent('MyApp', () => MyApp);

打印结果如下：

2019-12-16 15:47:49.359 [info][tid:main][RCTBatchedBridge.m:77] Initializing <RCTBatchedBridge: 0x600002630700> (parent: <RCTBridge: 0x6000034390a0>, executor: RCTJSCExecutor)
2019-12-16 15:47:49.405 [warn][tid:com.facebook.react.JavaScript][RCTModuleData.mm:220] RCTBridge required dispatch_sync to load RCTDevSettings. This may lead to deadlocks
2019-12-16 15:47:49.609 [info][tid:main][RCTRootView.m:295] Running application MyApp ({
    initialProps =     {
    };
    rootTag = 1;
})
2019-12-16 15:47:49.611 [info][tid:com.facebook.react.JavaScript] Running application "MyApp" with appParams: {"rootTag":1,"initialProps":{}}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF

2、我们可以使用registerRunnable函数注册一些AppKey，然后通过getAppKeys获取所有的注册键。

AppRegistry.registerRunnable("XYQ", function () {});
AppRegistry.registerRunnable("YPX", function () {});
const appKeys = AppRegistry.getAppKeys();
console.log(appKeys);

打印结果如下:

2019-12-16 15:34:40.029 [info][tid:com.facebook.react.JavaScript] [ 'XYQ', 'YPX' ]

ReactNative: 使用AppReistry注册类

猜你喜欢