ReactNative进阶（九）：API学习---注册组件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);

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
 

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

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

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

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

文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：shq5785.blog.csdn.net/article/details/116155704