ReactNative API学习之注册组件AppRegistry

一、前言

在前期博文《ReactNative进阶（三）：ReactNative 项目启动原理介绍》讲解了RN启动过程及原理，今天主要讲解下RN项目启动运行接口AppRegistry。

二、AppRegistry 简介

每一个应用程序的运行都需要有一个入口文件或者入口函数，而在React Native 中，AppRegistry是RN应用的入口函数。

AppRegistry负责注册运行React Native应用程序的JaveScript入口，程序入口组件使用AppRegistry.registerComponent来注册。当注册完应用程序组件后，Native系统（OC）就会加载jsbundle文件并触发AppRegistry.runApplication运行应用。AppRegistry接口有以下方法：

• registerConfig(config:Array): 静态方法，注册配置；
• registerComponent(appKey:string,getComponentFunc: ComponentProvider): 注册入口组件；
• registerRunnable(appKey:string , func :Function): 注册函数监听；
• getAppKeys(): 获取registerRunnable注册的监听键；
• runApplication(appKey:string,appParameter:any): 运行App；

首先解释下AppRegistry是JS运行所有React Native应用的入口， 那么什么是入口？

1.在我们初始化一个react native项目的时候，默认的index.ios.js/index.android.js文件内容是如下：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
 
class Allen extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
 
});
 
AppRegistry.registerComponent('Allen', () => Allen);

注：StyleSheet：ReactNative中使用的样式表，类似css样式表；StyleSheet.create创建样式实例，在应用中只会被创建一次，不用每次在渲染周期中重新创建；

上述代码中，系统自动创建了一个组件叫做Allen， 然后这个组件会被AppRegistry 这个API的注册函数显示出来。

带引号的这个“Allen”代表的是这个APP的名称， 后面的Allen代表的是所要显示的组件名称， 那么我们就可以再创建一个xxx.js文件 (在react-native中一个文件也是一个组件)， 然后我们就可以将这个组件注册到这里来， 则可以显示这个js所呈现的内容。

注意：注册的组件只是注册一次，与组件名称无关，和文件组件名称有关！

三、拓展阅读

• 《ReactNative专栏》