从零学React Native之01创建第一个程序
2016-08-02 08:50
239 查看
本篇首发于简书 欢迎关注
上一篇文章是时候了解React Native了介绍了React Native。大家应该对React Native有个初步的认识。
接下来我们就可以初始化一个React Native项目了。
其中AwesomeProject是项目的名称。默认init的版本都是ReactNative最新版本,目前最新版本0.30.0。可以通过项目目录下package.json文件查看.
初始化项目时间可能需要一段时间。
React Native在init时将项目需要用到的依赖包都下载到了当前目录下的node_modules目录中; Android运行程序在android目录下, 这个目录是可以导入Android Studio中进行调试。同样IOS运行程序在ios目录下。
如果手机已经装过程序, 只需要在命令窗口输入命令
修改完了代码, 不需要重新部署, 可以直接Reload JavaScript,就马上看到对UI所做的变更。具体操作如下,通过摇晃手机(模拟器输入命令
注意: 后面的在高版本上不需要了
如果你有Chrome浏览器,可以给Chrome浏览器装个扩展包,进行调试。
地址:https://github.com/facebook/react-devtools/releases
下载的程序拖入到Chrome扩展程序中,点击启用,允许访问网络
装好扩展包,当点击第二项调试的时候Chrome浏览器会自动启动,windows系统点击ctrl+shift+j 就来到调试页面,可以看到程序输出的日志。
是不是非常方便啊。
http://blog.csdn.net/gz_jero/article/details/51503374
更多精彩请关注微信公众账号likeDev,公众账号名称:爱上Android。
上一篇文章是时候了解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/8e9df5f85bcahttp://blog.csdn.net/gz_jero/article/details/51503374
更多精彩请关注微信公众账号likeDev,公众账号名称:爱上Android。
相关文章推荐
- 创建你的第一个带有窗口的Windows程序
- 创建第一个AJAX程序
- 创建第一个JFreeChart程序
- 在Android程序上以AIR为基础创建你的第一个 Flex
- 创建第一个WCF程序
- 我的第一个程序,创建和显示位图
- WCF教程系列(1)-创建第一个WCF程序
- Android 学习日志 2 :创建虚拟机,运行第一个Hello Android程序
- Windows Azure入门教学系列 (三):创建第一个Worker Role程序
- 从零开始Android游戏编程(第二版) 第二章 创建第一个程序Hello Tank
- 创建我们的第一个程序
- Java 技术基础笔记(2)—— 创建第一个Java程序 Hello World
- C#基础谈(二)---- 创建第一个C#程序
- 用vs2005创建第一个win32程序(附解决error c2731 c2440方法)
- 创建您的第一个 Word 应用程序级外接程序
- 创建第一个AJAX程序
- AIR中文帮助 第四章 用Flex Builder创建第一个Flex AIR程序
- 如何创建你的第一个iPhone程序
- 在Android程序上,创建你的第一个基于AIR的Flex
- 安装cTex并创建第一个tex程序