从零学React Native之01创建第一个程序

本篇首发于简书欢迎关注

上一篇文章是时候了解React Native了介绍了React Native。大家应该对React Native有个初步的认识。

接下来我们就可以初始化一个React Native项目了。

创建项目

打开命令窗口，进入我们希望建立的项目目录所在的父目录后，输入命令

react-native init AwesomeProject

其中AwesomeProject是项目的名称。默认init的版本都是ReactNative最新版本，目前最新版本0.30.0。可以通过项目目录下package.json文件查看.

初始化项目时间可能需要一段时间。

React Native在init时将项目需要用到的依赖包都下载到了当前目录下的node_modules目录中; Android运行程序在android目录下, 这个目录是可以导入Android Studio中进行调试。同样IOS运行程序在ios目录下。

调试程序

以调试Android程序为例,在安装目录下，输入命令：react-native run-android，程序会自动运行到模拟器或真机中(记得打开USB调试,和电脑在一个wifi下),同时也会运行React packager服务窗口（类似Tomcat,程序在调试阶段不要关）。

如果手机已经装过程序, 只需要在命令窗口输入命令react-native start 打开React packager窗口,手机直接打开程序就可以了。

修改JSX代码,获取手机宽高

打开项目目录下的index.android.js(如果使用Android手机调测)或者index.ios.js(如果使用iPhone手机调测) 文件,可以对代码进行修改,比如我们经常需要计算手机的宽,高和屏幕密度.

 * Sample React Native App

 * https://github.com/facebook/react-native

 * @flow

 */

import React, { Component } from 'react';

import {

    AppRegistry,

    StyleSheet,

    Text,

    View

} from 'react-native';

var Dimensions=require('Dimensions');//加载Dimensions模块

let PixelRatio=require('PixelRatio'); // 加载PixelRatio模块

////获取屏幕宽度,单位PT,单位不是实际的物理像素,而是逻辑像素, 类似于Android中dp或者ios中点

let totalWidth=Dimensions.get('window').width;

let totalHeight=Dimensions.get('window').height; //获取屏幕高度

let pixelRatio=PixelRatio.get(); // 获取屏幕密度, 1PT等于多少实际像素

// 这是ES6语法 和java非常相似

class AwesomeProject extends Component {

    render() {

        let aValue;

        // 打印日志, 可以通过chrome装插件进行查看

        console.log('aaaa');

        console.log('totalHeight is'+totalHeight);

        console.log('aValue is:'+aValue);

        console.log('the type of aValue is:'+typeof (aValue));

        return (

            <View style={styles.container}>

                <Text style={styles.welcome}>

                   pixelRatio={pixelRatio}

                </Text>

                <Text style={styles.instructions}>

                    totalHeight={totalHeight}

                </Text>

                <Text style={styles.instructions}>

                    totalWidth={totalWidth}

                </Text>

            </View>

        );

    }

}

const styles = StyleSheet.create({

    container: {

        flex: 1,

        justifyContent: 'center',

        alignItems: 'center',

        backgroundColor: '#F5FCFF'

    },

    welcome: {

        fontSize: 20,

        textAlign: 'center',

        margin: 10

    },

    instructions: {

        textAlign: 'center',

        color: '#333333',

        marginBottom: 5

    }

});

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

修改完了代码, 不需要重新部署, 可以直接Reload JavaScript,就马上看到对UI所做的变更。具体操作如下，通过摇晃手机(模拟器输入命令adb shell input keyevent 82)弹出调试菜单点击Reload即可,非常方便。

注意: 后面的在高版本上不需要了

如果你有Chrome浏览器,可以给Chrome浏览器装个扩展包,进行调试。

地址：https://github.com/facebook/react-devtools/releases

下载的程序拖入到Chrome扩展程序中,点击启用,允许访问网络

装好扩展包，当点击第二项调试的时候Chrome浏览器会自动启动,windows系统点击ctrl+shift+j 就来到调试页面,可以看到程序输出的日志。

是不是非常方便啊。

IDE

React Native出来1年多了, 有好多编译器都支持了, 比如WebStorm，Sublime Text 3等等。可以参考http://www.jianshu.com/p/8e9df5f85bca

http://blog.csdn.net/gz_jero/article/details/51503374

更多精彩请关注微信公众账号likeDev,公众账号名称：爱上Android。