RN的第一個API-----註冊組件Appregistry

標籤：

首先解釋下AppRegistry是JS運行所有React Native應用的入口  什麼是入口？

1.在我們初始化一個react native項目的時候 預設的index.ios.js/index.ios.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);

　　

這段代碼中系統自動建立了一個組件叫做Allen 然後這個組件會被Appregistry 這個API的註冊函數顯示出來。

   帶雙引號的這個“Allen”代表的是這個APP的名稱 後面的Allen代表的是所要顯示的組件名稱， 那麼我們就可以在建立一個xxx.js檔案 (在react-native中一個檔案也是一個組件) 那麼我們就可以將這個組件註冊到這裡來 則可以顯示這個js所呈現的內容  

import React, { Component } from ‘react‘;import {  AppRegistry,  StyleSheet,  Text,  View} from ‘react-native‘;import NextPage  from ‘./NextPage‘AppRegistry.registerComponent(‘Allen‘, () => NextPage );  //註冊組件

　　

import React, { Component } from ‘react‘;//匯入react的組建import {//需要的組建匯入  AppRegistry,  StyleSheet,  Text,  View,  Navigator,  TouchableHighlight} from ‘react-native‘;export default class HelloPage extends Component {  //注意：註冊的組件只是註冊一次 和組件名稱無關  和檔案組件名稱有關  constructor(props) {    super(props)  }  render(){    const {navigator} = this.props;    return(      <View style={{padding:50,borderWidth:1,}}>                 <Text style={{fontSize:50,}}>sds‘d‘f‘d‘sds</Text>      </View>    )  }}

　　

RN的第一個API-----註冊組件Appregistry