React-native学习笔记系列文章以React-Native学习指南上提到的内容为主要参考资料,有兴趣同学可以参考继续学习。
目前,Facebook出了iOS版和Web版本,Android版预计今年(2015)8月份会发布,我的计划是写4篇iOS版的和1篇Web版的,当然了,开发环境是Mac OS X 10.10,下面是目录,更新后会添加上链接。
iOS版:
1.配置React-native开发环境,做一个新闻列表。
2.如何使用React-native组件,做一个多组件的app,做成哪样还没想好。
3.如何使用React-native精确布局,当然了会写一个小demo,名字还没想好。
4.如何在现有OC程序中部分使用React-native,也搞个小demo,能用就行。
Web版:
5.从Web开发的角度理解React-native,我主要想写的是如何用React-native写前端和React-native是如何让Web和iOS统一的。
配置React-native开发环境,做一个新闻列表。
首先是安装开发环境,好了,你可以打开终端和我一起无聊的敲命令了,奥,不是敲是粘贴。
1.安装 homebrew (homebrew 是一个工具,通过它你可以用brew命令安装下面的很多工具)
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
2.安装 node (react-native 需要一个服务器端跟他返回数据嘛)
brew install node
3.安装watchman (搞不懂是什么东西,不重要,安装就好了)
brew install watchman
4.安装npm (和cocoapods类似的一个东西,安装node都会装)
npm install
5.安装 react-native 命令行工具
sudo npm install -g react-native-cli
6.创建一个 react-native 项目 (名字叫:AwsomeProject)
react-native init AwsomeProject
顺便提一句,我不知道上面这些有没有涉及到翻墙的地址,如果发现连接失败,请把ruby环境更换成淘宝的ruby镜像。
做到这,你基本就已经大功告成了,你已经创建了一个叫做AwsomeProject名字的iOS工程,上面那个是工程目录,下面那个目录是node.js的目录,你可以像平时一样启动程序,它将是一个空白程序。
下面这个截图是它的appDelegate,很容易你就可以看明白,它在网络上请求了一个文件,用这个文件来生成了一个view,并将这个view作为rootVc的view,至于怎么把这个view转化过来的先不讨论。现在你很自然的想到我们需要编码的就是上面url对应的文件,这个文件就在我们工程目录里,index2.ios.js,顺便说一句文件名随便取,对应就行。
又到了贴代码时间:
//获取react-native 模块
var React = require('react-native');
// 写了这个在AppRegistry,Image前面就不用加React了。(不怎么会描述了)
var {
AppRegistry,
Image,
StyleSheet,
Text,
View,
ListView,
} = React;
//类似于Css,控制样式的
var styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
marginBottom:10,
},
thumbnail: {
width: 40,
height: 60,
marginTop:5,
},
rightContainer: {
flex: 1,
paddingLeft:10,
},
line: {
width:500,
height:1,
backgroundColor:'black',
},
title: {
fontSize: 20,
marginBottom: 8,
textAlign: 'left',
},
year: {
textAlign: 'left',
},
listView: {
paddingTop: 20,
paddingLeft:10,
backgroundColor: '#F5FCFF',
},
});
//拼接成一个链接而已
var API_KEY = '7waqfqbprs7pajbz28mqf6vz';
var API_URL = 'http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json';
var PAGE_SIZE = 25;
var PARAMS = '?apikey=' + API_KEY + '&page_limit=' + PAGE_SIZE;
var REQUEST_URL = API_URL + PARAMS;
//定义一个类
var AwesomeProject = React.createClass({
//初始化数据
getInitialState: function() {
return {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
}),
loaded: false,
};
},
//componentDidMount是React组件中的一个函数,它只会在组件加载完成之后被调用一次。类似于ios 中viewdidlown方法
componentDidMount: function() {
this.fetchData();
},
//请求网络数据
fetchData: function() {
fetch(REQUEST_URL)
.then((response) => response.json())
.then((responseData) => {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
loaded: true,
});
})
.done();
},
//如果数据还没有加载调用这个方法
renderLoadingView: function() {
return (
<View style={styles.container}>
<Text>
Loading movies...
</Text>
</View>
);
},
//如果数据已经加载调用这个方法(它是一列的界面)
renderMovie: function(movie) {
return (
<View>
<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>
<View style={styles.line}>
</View>
</View>
);
},
//这个方法最后返回的就是对应的界面
render: function() {
if (!this.state.loaded) {
return this.renderLoadingView();
};
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderMovie}
style={styles.listView} />
);
}
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
代码上我都做了一定注释就不详谈了,你可以修改了玩一玩,整个语法是js语法。render 是输出界面的,除了这个方法,在React.createClass里其它方法都是给他调用或者系统自动调用的,还有呢就是样式,写法和css差不多。还有几句话呢照着写就行了,后面再介绍它的意思,顺便说一句:这个js的写法是jsx语法,它对js语法进行了扩展,在js里可以写html代码,看起来和angularjs的语法还有点像,其实还是本质上不同的,一个是js里写html,一个html写js。下面把这个demo的运行效果截个图,大功告成,你看是不是很像iOS里的tableview呢。
更大家搞点延生阅读,以更好的了解React-native(大多是一些对比优缺点呀什么的,有的时候不学不要紧,还是要知道嘛).
知乎上讨论得很热闹,看完你也基本就知道React-native 到底是个啥情况了:http://www.zhihu.com/question/27852694 本来准备再搞点别的资料的,一看这内容这么多,看看这个也就够了