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所呈现的内容。

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