
正文
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函数运行结果示例如下:
-- ::35.806 [info][tid:com.facebook.react.JavaScript] Running application "ReactNativeDemo" with appParams: {"rootTag":,"initialProps":{}}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
通过console.log(AppRegistry.runApplication.toString())打印具体的AppRegistry.runApplication函数实现如下所示:
-- ::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);
打印结果如下:
-- ::49.359 [info][tid:main][RCTBatchedBridge.m:] Initializing <RCTBatchedBridge: 0x600002630700> (parent: <RCTBridge: 0x6000034390a0>, executor: RCTJSCExecutor)
-- ::49.405 [warn][tid:com.facebook.react.JavaScript][RCTModuleData.mm:] RCTBridge required dispatch_sync to load RCTDevSettings. This may lead to deadlocks
-- ::49.609 [info][tid:main][RCTRootView.m:] Running application MyApp ({
initialProps = {
};
rootTag = ;
})
-- ::49.611 [info][tid:com.facebook.react.JavaScript] Running application "MyApp" with appParams: {"rootTag":,"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);
打印结果如下:
-- ::40.029 [info][tid:com.facebook.react.JavaScript] [ 'XYQ', 'YPX' ]







