ReactNative: Use AppReistry class registration

I. Introduction

Run each application has a file entry or the entry function, for example, in iOS UIApplicationMain complete the implementation class entry functions, in React-Native in, AppRegistry class to shoulder this responsibility. JavaScript AppRegistry mainly responsible for running the React-Native application entry, root component registration, registration approach is AppRegistry.registerComponent (). When completed registration application components, Native systems (in Objective -C) will load the file and trigger AppRegistry.runApplication jsbundle use application.

Entry function registration React-Native example as follows: the component as the root ReactNativeDemo container application

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

Results Example AppRegistry.runApplication function runs as follows:

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

Specific AppRegistry.runApplication print function implementation is shown below by console.log (AppRegistry.runApplication.toString ()):

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

// static methods, register configuration 
registerConfig (config: Array <AppConfig> )

// register a slice 
AppRegistry.registerSection (appKey, component)

// Register inlet assembly 
registerComponent (AppKey: String , the Component: ComponentProvider, Section? : Boolean)

// Register listener function, if appKey there is no error. 
registerRunnable (AppKey: String , RUN: Function)

// get monitor key registerRunnable registered 
getAppKeys ()

// Run App, i.e. corresponding to the registered inlet assembly AppKey 
runApplication (AppKey: String , AppParameters: the any)

// end the application, the default parameters does not pass in the end appKeys first 
AppRegistry.unmountApplicationComponentAtRootTag (rootTag)

// execute the corresponding task. The second parameter is a method that returns a requirement Promise objects 
AppRegistry.startHeadlessTask (taskId, taskKey, data)

// create a task, this thread is not supported by the UI 
AppRegistry.registerHeadlessTask (taskKey, Task)

 

Third, the use

1, the inlet modify the application, but also normal start APP

AppDelegate.m：

// here before I will modify the application name ReactNativeDemo now MyApp 
RCTRootView RootView * = [[RCTRootView alloc] initWithBundleURL: jsCodeLocation
                                                      moduleName:@"MyApp"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];

index.ios.js：

// here before I registered modify the application name reactNativeDemo is now MyApp 
AppRegistry.registerComponent ( ' MyApp ' , () => MyApp);

Print results are as follows:

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 = the 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, we can use registerRunnable function register some AppKey, then get all of the registry keys by getAppKeys.

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

Print results are as follows:

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