ReactNative进阶（九）：API学习---注册组件AppRegistry

拼搏现实的明天。 2023-01-16 15:29 373阅读 0赞

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

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