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专栏》