React Native 学习记录（一）初识React Nati

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

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

…………

进入正题（ES6语法）

React Native 总览

React Native 组件

      例如：ListView、Image 、MapView、 Picker、 Slider、 text、 view ……

导入所需的组件

<View style={{flex:1,backgroundColor:'white'}}}>
                    <NavBar onBackPressed={this.onBackPress}/>
                </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 (
        <View style={styles.container}>
            <Text style={styles.welcome}>
                React-Native入门学习
            </Text>
            <Image style={styles.pic} source={{uri: 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png'}}>
            </Image>
        </View>
    );
}
});

我们需要提供视图的样式，那么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);