360SDN.COM

React-Native的第一个API-----注册组件Appregistry

来源:  2017-06-18 12:04:13    评论:0点击:

来源:http://www.cnblogs.com/allenxieyusheng/p/5775308.html
首先解释下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>
    )
  }
}
为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权