一、Homebrew 是OS X 的套件管理器。

首先我们需要获取 Homebrew

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

1、我们可以先通过在终端输入: brew -v

  如果没有安装就输入Homebrew的镜像路径去下载

2、拥有了brew,就可以通过它去下载一些依赖了,比如node,我们可以在终端输入:brew install node,如果提示 already installed说明已经下载过了

3、下载watchman,终端输入:brew install watchman,它是用来检测文件变化的一个工具,如果提示 already installed说明已经下载过了

4、然后可以下载flow,终端输入:bre install flow ,它是用来检测jsx语法的工具,如果提示 already installed说明已经下载过了

5、安装完依赖之后,我们就通过npm来安装react Native的命令行工具,终端输入:npm install -g react-native-cli

6、这个时候我们就可以通过命令行来创建一个HelloWorld:react-native init HelloWorld ,过程会比较久一点呐

  如果确实是太久,那就应该是npm加载的问题啦,可以换成淘宝的镜像(http://npm.taobao.org/),终端输入:

alias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"

7、又或者是要取得权限,终端输入:sudo react-native init HelloWorld

二、demo

1、demo1:首页显示一张图片和文字,图片不能仅仅通过构建控件,还需要设置宽高[通过index.ios.js文件进行修改]

  

 /**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';//表示在严格模式下的JS文件 var React = require('react-native');//定义react组件的依赖 //demo:增加一个Image属性
var MOCKED_MOVIES_DATA = [
{title: 'myTitle', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}},
];
//等同于 var React = AppRegistry;这样的简化,这是ES6的写法
  //每一个属性对应的是React里面提供的组件
var {
AppRegistry,
Image,
StyleSheet,
Text,
View,
} = React; var HellWorld = React.createClass({
render: function() { var movie = MOCKED_MOVIES_DATA[0]; return (
<View style={styles.container}> <Text >{movie.title}</Text> <Image
source={{uri:movie.posters.thumbnail}}
style={styles.thumbnail}
/> </View>
);
}
}); var styles = StyleSheet.create({
container: {
flex: 1,            //flexbox
justifyContent: 'center', //垂直居中
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
thumbnail:{
width:53,
height:90, //长度无单位,默认PT
},
}); //注册组件:ES6的写法,引号内是组件名字,后面是返回对应的组件
AppRegistry.registerComponent('HellWorld', () => HellWorld);

2、demo2:在1 的基础上构造一个列表,通过网络数据请求动态绑定

 /**
* Sample React Native App
* http://www.cnblogs.com/daomul/
*/
'use strict'; /*网络请求URL*/
var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json'; var React = require('react-native'); var {
AppRegistry,
Image,
StyleSheet,
Text,
View,
ListView,
} = React; var HellWorld = React.createClass({ getInitialState:function(){
return {
dataSource:new ListView.DataSource({
rowHasChanged: (row1,row2) => row1 !== row2
}),
loaded:false,
}
},
componentDidMount:function(){
this.fetchData();
},
render: function() {
if (this.state.loaded) {
return this.renderList();
}else {
return this.renderLoadingView();
}
},
renderList:function(){
return (<ListView
dataSource={this.state.dataSource}
renderRow={this.renderListItem}
style={styles.listView}
/>);
},
renderListItem:function(movie){
return <View style={styles.container}> <Image
source={{uri:movie.posters.thumbnail}}
style={styles.thumbnail}
/>
<View style={styles.rightContainer}>
<Text style={styles.title}>{movie.title}</Text>
<Text style={styles.year}>{movie.year}</Text>
</View>
</View>;
},
renderLoadingView:function(){
return <View style={styles.listView}>
<Text>loading.....</Text>
</View>;
}, //负责数据的抓取
fetchData:function(){
fetch(REQUEST_URL)
.then((response)=>response.json())
.then((responseData)=>{
this.setState({
dataSource:this.state.dataSource.cloneWithRows(responseData.movies),
loaded:true,
});
})
.done();/*调用.done不然有错误信息会被吃掉的*/
},
}); /*flexDirection:'row' 子容器按照水平方向来flex*/
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
flexDirection:'row',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
thumbnail:{
width:53,
height:90,
},
rightContainer:{
flex:1,
},
title:{
fontSize:20,
marginBottom:8,
textAlign:'center',
},
year:{
textAlign:'center',
},
listView:{
paddingTop:20,
backgroundColor:'#F5FCFF',
}
}); AppRegistry.registerComponent('HellWorld', () => HellWorld);

  

React Native ——入门环境搭配以及简单实例的更多相关文章

  1. React Native入门教程 1 -- 开发环境搭建

    有人问我为啥很久不更新博客..我只能说在学校宿舍真的没有学习的环境..基本上在宿舍里面很颓废..不过要毕业找工作了,我要渐渐把这个心态调整过来,就从react-native第一篇博客开始.话说RN也出 ...

  2. react native 入门 (1)- 环境搭建, 创建第一个Hello World

    Create React Native App 是开始构建新的React Native应用程序的最简单方法.它允许您启动项目而无需安装或配置任何工具来构建本机代码 - 无需安装Xcode或Androi ...

  3. React Native 入门基础知识总结

    中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...

  4. React Native iOS环境搭建

    前段时间React Native for Android发布,感觉React Native会越来越多的公司开始研究.使用.所以周六也抽空搭建了iOS的开发环境,以便以后利用空闲的时间能够学习一下. 废 ...

  5. React Native入门教程2 -- 基本组件使用及样式

    在上一篇文章中,我们学会了如何搭建React Native的环境(React Native入门教程(笔记) 1 – 开发环境搭建),不知道你们是否搭建好了呢,如果还没有,那么快动起小手,来体验RN带给 ...

  6. 《React Native 精解与实战》书籍连载「Node.js 简介与 React Native 开发环境配置」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  7. android Jni NDK开发环境搭建及其简单实例的编写

    android  Jni  NDK开发环境搭建及其简单实例的编写 由于工作需要,需要采用开发想要的JNI,由于之前没有接触过安卓的开发,所以更加网上的帖子,学习了下.遇到了些问题,然后总结下学习过程中 ...

  8. React Native入门-刘望舒

    React Native入门(一)环境搭建与Hello World React Native入门(二)Atom+Nuclide安装.配置与调试 React Native入门(三)组件的Props(属性 ...

  9. React Native入门——布局实践:开发京东client首页(一)

    有了一些对React Native开发的简单了解,让我们从实战出发.一起来构建一个简单的京东client. 这个client是仿照之前版本号的京东client开发的Android版应用,来源于CSDN ...

随机推荐

  1. V8学习资源

    http://wenku.baidu.com/link?url=7mk6ib9IJ-1K_-bFVZ-fXXo2nbI3jOJ3cnhr3XC3b08fPOKkc9v8vSAd-DgNMJZ2vdjg ...

  2. 服务端API安全解决方案

    由于server端和client端需要通信,所以api的安全性需要保证 1.完全开放的 一般只是查询,不能执行增.删.改的操作 裸奔的 <?php public function getGood ...

  3. org.apache.http.client.methods.HttpGet 转到定义找不到源代码

    例如 org.apache.http.client.methods.HttpGet ,提示没有源码 到这里下载 http://hc.apache.org/downloads.cgi Source 4. ...

  4. Tomcat------如何更改被IIS占用的80端口

    1.打开cmd,运行'netstat -ano'发现80端口被pid=4的进程占用 2.打开任务管理器,发现pid=4的进程,其实是system进程,其对应的进程描述是NT kernel & ...

  5. 利用函数来得到所有子节点号& 利用函数来取得最高级的节点号

    在Oracle 中我们知道有一个 Hierarchical Queries 通过CONNECT BY 我们可以方便的查了所有当前节点下的所有子节点.但很遗憾,在MySQL的目前版本中还没有对应的功能. ...

  6. 【代码审计】iZhanCMS_v2.1 前台IndexController.php页面存在SQL注入 漏洞分析

      0x00 环境准备 iZhanCMS官网:http://www.izhancms.com 网站源码版本:爱站CMS(zend6.0) V2.1 程序源码下载:http://www.izhancms ...

  7. iptraf:一个实用的TCP/UDP网络监控工具

    iptraf是一个基于ncurses的IP局域网监控器,用来生成包括TCP信息.UDP计数.ICMP和OSPF信息.以太网负载信息.节点状态信息.IP校验和错误等等统计数据. 它基于ncurses的用 ...

  8. STL概论

    一.STL简介 1.STL(Standard Template Library,标准模板库)是C++标准库最主要和最重要的组成部分.其重要作用在于: (1)它可以用来创建动态增长和减小的数据结构: ( ...

  9. 关于GDI+的一些使用基础设置

    一.新建一个MFC的单文档工程,例如工程名字叫GDIPLUSTEST1. 二.在工程的stdafx.h头文件中添加入 #include "gdiplus.h" using name ...

  10. php计算两个日期时间差(返回年、月、日)

    在PHP程序中,很多时候都会遇到处理时间的问题,比如:判断用户在线了多长时间,共登录了多少天,两个帖子发布的时间差或者是不同操作之间的日志记录等等.在文章中,简单地举例介绍了PHP中如何计算两个日期相 ...