React Native 学习记录(一)初识React Native

关于React Native的介绍,省略……

关于环境的搭建,省略……

…………

进入正题(ES6语法)

React Native 总览
React Native 组件
      例如:ListView、Image 、MapView、 Picker、 Slider、 text、 view ……
导入所需的组件

                    
                
import React, {Component} from 'react';
import {    
NavigatorIOS,   
ListView,    
TextInput,    
WebView,    
TouchableOpacity,    
AppRegistry,    
StyleSheet,    
Image,    
Text,    
View
} from 'react-native';
React提供了React.createClass的方法创建一个类。里面的render方法就是渲染视图用的
var HelloWorld = React.createClass({
   render: function() {
    return (
        
            
                React-Native入门学习
            
            
            
        
    );
}
});
我们需要提供视图的样式,那么StyleSheet.create就是干这件事的,style={styles.container},其中style是视图的一个属性,styles是我们定义的样式表,container是样式表中的一个样式
var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
        color: 'red',
    },
    pic: {
        width:100,
        height:100,
    }
});
注册应用的入口
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

你可能感兴趣的:(React Native 学习记录(一)初识React Native)