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>
    )
  }
}