React Native编译器的配置以及基础知识

　　入职新公司，这边打算采用RN来写界面，因此学习一波这一块的知识。

　　采用的是WebStorm来编译，据同事说，比他采用atom编译要多不少语法提示。
　　下载地址：https://www.jetbrains.com/webstorm/
　　安装以后须要破解：http://blog.csdn.net/zhalcie2011/article/details/57409082
　　进入WebStorm，进行基础配置，诸如RN语法高亮等：http://blog.csdn.net/xiangzhihong8/article/details/52293896
　　语法提示插件：https://github.com/virtoolswebplayer/ReactNative-LiveTemplate
　　配置完成以后，RN相关Api、关键字等都有提示，算是比较友好了。

　　RN项目基础配置　　　　

import React, {Component} from 'react';

import
{
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';

 import与iOS一致，是导入组件or面向组件，其中默认组件是不须要{}包裹起来的，好比说React，可是Component、Appregistry、Text等组件都是非默认组件，因此须要用{}包裹起来。

class MyApp extends Component {
    render() {
        var str = 'ppppppppppppppp';
        return (

            <View style={{backgroundColor: 'red', flex: 1}}>
                <Text style={{flex: 1}}>{str}</Text>
            </View>
        )
    }
}

上面的代码是自定义程序入口组件，相似于[[UIView alloc] init]，当一个组件要显示的时候，就会自动调用render方法，渲染组件。extends关键字意味着继承自哪一个类，这是ES6的语法，建议在看RN具体代码时，过一遍JS与ES6的语法。

 

我在学习的时候，有一点老是弄不清楚，不知道何时要加{}，何时不加；也不知道何时加()，何时不加？

　　一、包装对象的时候使用{}，在JS中，对象就是这么写的 {x: 100, y: 100, method: function() {} } 

　　二、表达式都须要使用{}，在上述的代码中，<View style={}.....    这就是一个赋值表达式，因此须要一个{}，那么为何{}里面还有{}呢？{flex: 1}这是个对象了，因此须要{}包裹起来

　　三、变量也须要用{}包裹起来，好比上面的<Text style={{flex: 1}}>{str}</Text>中str是个变量，因此包裹起来显示，若是不包裹，那么text就是直接显示str。

　　四、在包裹组件标签的时候，必须使用()，上面return () 里面的代码，就是组件标签。

 

var styles = StyleSheet.create({
    font: {
        fontWeight: 'bold',
        color: 'green',
        fontSize: 14,
    },
});

　　　　上面是样式表、组件外观等配置。也能够直接像html那般，写在组件里面，例如：<View style={{backgroundColor: 'red', flex: 1}}>。

　　　　

AppRegistry.registerComponent('MyApp', ()=> MyApp);

注册程序入口组件，注册哪一个组件、程序启动的时候就会自动去加载注册组件。

第一个参数：模块名称,随意填，可是必须与iOS模块名称一致，负责会报找不到组件入口的错误，这里的模块名是'MyApp'

第二个参数：函数,箭头函数ES6的语法，须要返回组件类名。

(箭头函数：=> 左边：函数参数，右边：函数返回值)

 

在学习过程当中，没有感受到RN的布局有什么困难的地方，就不记录了，下次更新prop与state、传值等知识。