从零学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程序为例,在安装目录下,输入命令: 如果手机已经装过程序,只需要在命令窗口输入命令 修改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所做的变更。具体操作如下,通过摇晃手机(模拟器输入命令 注意: 后面的在高版本上不需要了 如果你有Chrome浏览器,可以给Chrome浏览器装个扩展包,进行调试。 下载的程序拖入到Chrome扩展程序中,点击启用,允许访问网络 装好扩展包,当点击第二项调试的时候Chrome浏览器会自动启动,windows系统点击ctrl+shift+j 就来到调试页面,可以看到程序输出的日志。 是不是非常方便啊。 IDEReact Native出来1年多了,有好多编译器都支持了,比如WebStorm,Sublime Text 3等等。可以参考http://www.jianshu.com/p/8e9df5f85bca 更多精彩请关注微信公众账号likeDev,公众账号名称:爱上Android。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |