React Native新手引导
我们这里假设你已经有了使用React编写Web应用程序的经验。如果还没有,建议你可以先从React官网开始学习。
准备工作
React Native需要一些基础的配置工作,你可以参考开始使用React Native来进行。
在所有依赖的软件都已经安装完毕后,只需要输入两条命令就可以创建一个React Native工程。
npm install -g react-native-cli
react-native-cli是一个终端命令,它可以完成其余的设置工作。它可以通过npm安装。刚才这条命令会往你的终端安装一个叫做
react-native
的命令。这个安装过程你只需要进行一次。react-native init AwesomeProject
这个命令会初始化一个工程、下载React Native的所有源代码和依赖包,最后在
AwesomePrjoect/iOS/AwesomeProject.xcodeproj
和AwesomeProject/android/app
下分别创建一个新的XCode工程和一个gradle工程。
译注:由于众所周知的网络原因,react-native命令行从npm官方源拖代码时会遇上麻烦。请先将npm仓库源替换为国内镜像:
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
另,执行init时切记不要在前面加上sudo(否则新项目的目录所有者会变为root而不是当前用户,导致一系列权限问题,请使用chown修复)。
本站论坛区提供了完整的绿色纯净新项目包。完整打包全部iOS和Android的第三方依赖,只要环境配置正确,无需科学上网漫长等待,解压即可直接运行。
开发
在本向导中我们会创建一个简单的Movies应用,它可以获取25个上映中的电影,然后把他们在一个ListView中显示。
Hello World
模拟数据
var MOCKED_MOVIES_DATA = [{title: '标题', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}},
];
展现一个电影
import React, {AppRegistry,Component,Image,StyleSheet,Text,View,
} from 'react-native';
然后修改一下render函数,这样我们可以把上面创建的模拟数据渲染出来。
render() {var movie = MOCKED_MOVIES_DATA[0];return (<View style={styles.container}><Text>{movie.title}</Text><Text>{movie.year}</Text><Image source={{uri: movie.posters.thumbnail}} /></View>);}
var styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},thumbnail: {width: 53,height: 81,},
});
<Imagesource={{uri: movie.posters.thumbnail}}style={styles.thumbnail}/>
按下?+R
或者Reload JS
,现在图片应该可以被渲染出来了。
添加样式
现在我们已经成功的把我们的数据渲染出来了,下面让我们把它弄的更好看一些。我想把文字放在图片的右边,然后把标题弄的大一些,并且水平居中:
+---------------------------------+
|+-------++----------------------+|
|| || 标题 ||
|| 图片 || ||
|| || 年份 ||
|+-------++----------------------+|
+---------------------------------+
所以我们需要增加一个container来实现一个水平布局内嵌套一个垂直布局。
return (<View style={styles.container}><Imagesource={{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>);
和之前相比并没有太多变化,我们增加了一个container来包装文字,然后把它移到了Image的后面(因为他们最终在图片的右边)。然后我们来看看样式要怎么改:
container: {flex: 1,flexDirection: 'row',justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},
我们用Flexbox来布局。如果你想了解更多,可以读读这篇文章。
在上面的代码片段中,我们用了一句flexDirection: 'row'
来让我们的主容器的成员从左到右横向布局,而非默认的从上到下纵向布局。
rightContainer: {flex: 1,},
title: {fontSize: 20,marginBottom: 8,textAlign: 'center',},year: {textAlign: 'center',},
拉取真正的数据
从Rotten Tomatoes的API拉取数据和学习React Native并没有什么直接关系,所以你也可以直接跳过本节。
把下面的常量放到文件的最开头(通常在require下面)来创建我们请求数据所需的地址常量REQUEST_URL
/*** 为了避免骚扰,我们用了一个样例数据来替代Rotten Tomatoes的API* 请求,这个样例数据放在React Native的Github库中。*/
var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';
constructor(props) {super(props); //这一句不能省略,照抄即可this.state = {movies: null, //这里放你自己定义的state变量及初始值};}
componentDidMount() {this.fetchData();}
fetchData() {fetch(REQUEST_URL).then((response) => response.json()).then((responseData) => {this.setState({movies: responseData.movies,});}).done();}
现在我们来修改render函数。在电影数据加载完毕之前,先渲染一个“加载中”的视图;而如果电影数据已经加载完毕了,则渲染第一个电影数据。
render() {if (!this.state.movies) {return this.renderLoadingView();}var movie = this.state.movies[0];return this.renderMovie(movie);}renderLoadingView() {return (<View style={styles.container}><Text>正在加载电影数据……</Text></View>);}renderMovie(movie) {return (<View style={styles.container}><Imagesource={{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>);}
现在再按一次?+R
或者Reload JS
,你会首先看到“正在加载电影数据……”,然后在响应数据到达之后,看到第一个电影的信息。
ListView
现在我们来让我们的应用能够渲染所有的数据而不是仅仅第一部电影。我们要用到的就是ListView组件。
首先要做的事情:在文件最开头,从React中引入ListView
。
import React, {AppRegistry,Component,Image,ListView,StyleSheet,Text,View,
} from 'react-native';
现在来修改render函数。当我们已经有了数据之后,渲染一个包含多个电影信息的ListView,而不仅仅是单个的电影。
render() {if (!this.state.loaded) {return this.renderLoadingView();}return (<ListViewdataSource={this.state.dataSource}renderRow={this.renderMovie}style={styles.listView}/>);}
dataSource
接口用来在ListView的整个更新过程中判断哪些数据行发生了变化。
constructor(props) {super(props);this.state = {dataSource: new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2,}),loaded: false,};}
同时我们也要修改fetchData
方法来把数据更新到dataSource里:
fetchData() {fetch(REQUEST_URL).then((response) => response.json()).then((responseData) => {this.setState({dataSource: this.state.dataSource.cloneWithRows(responseData.movies),loaded: true,});}).done();}
最后,我们再在styles
对象里给ListView
添加一些样式。
listView: {paddingTop: 20,backgroundColor: '#F5FCFF',},
为了实现一个完整功能的应用,接下来其实还有一些工作要做,譬如:添加导航器,搜索,加载更多,等等等等。可以在Movies示例中看看我们做了什么。
最终的代码
/*** Sample React Native App* https://github.com/facebook/react-native*/import React, {AppRegistry,Component,Image,ListView,StyleSheet,Text,View,
} from 'react-native';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;class AwesomeProject extends Component {constructor(props) {super(props);this.state = {dataSource: new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2,}),loaded: false,};}componentDidMount() {this.fetchData();}fetchData() {fetch(REQUEST_URL).then((response) => response.json()).then((responseData) => {this.setState({dataSource: this.state.dataSource.cloneWithRows(responseData.movies),loaded: true,});}).done();}render() {if (!this.state.loaded) {return this.renderLoadingView();}return (<ListViewdataSource={this.state.dataSource}renderRow={this.renderMovie}style={styles.listView}/>);}renderLoadingView() {return (<View style={styles.container}><Text>Loading movies...</Text></View>);}renderMovie(movie) {return (<View style={styles.container}><Imagesource={{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>);}
};var styles = StyleSheet.create({container: {flex: 1,flexDirection: 'row',justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},rightContainer: {flex: 1,},title: {fontSize: 20,marginBottom: 8,textAlign: 'center',},year: {textAlign: 'center',},thumbnail: {width: 53,height: 81,},listView: {paddingTop: 20,backgroundColor: '#F5FCFF',},
});AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
本文转自React Native中文网:http://reactnative.cn/docs/0.20/tutorial.html#content
React Native新手引导相关推荐
- Android特效(包含React Native)
在这里提供了一些Android特效,大家可以参考一下, 带有删除按钮的dialog https://www.jianshu.com/p/9259ad7f857bToast封装 https://www. ...
- fragment中文网_更新 · React Native 中文网
时刻将 React Native 更新到最新的版本,可以获得更多 API.视图.开发者工具以及其他一些好东西(译注:官方开发任务繁重,人手紧缺,几乎不会对旧版本提供维护支持,所以即便更新可能带来一些兼 ...
- React Native —— App
使用 React Native 作为 app 框架,Redux 作为数据层,因此我们需要选用一些支持性的技术和工具: 开源的 Parse Server 做数据存储 - 运行在 Node.js 上. F ...
- 【React Native】iOS原生导航跳转RN页面
上一篇介绍了React Native使用react-navigation进行导航跳转页面,现在我们介绍下原生iOS中怎么导航进一个新的React Native页面. 一.原生跳转React Nativ ...
- 【React Native】react-navigation导航使用方法
目录 集成react-navigation 使用react-navigation 上一篇介绍了如何在已有iOS项目中集成React Native.这一篇我们把上一篇的demo做下拓展,添加点击电影跳转 ...
- 给iOS开发者的React Native入门使用教程
目录 一. 原生iOS项目集成React Native 二. 原生跳转RN页面 三. 显示豆瓣热门电影列表 四. 改为导航 五.完整源代码 一. 原生iOS项目集成React Native 创建一个新 ...
- 对比React Native、dcloud、LuaView三个框架技术(内部)
转载自:http://www.jianshu.com/p/ee1cdb33db8d 主要对比React Native和5+SDK(就是dcloud的SDK)两个: 开发语言:三个都是用其他语言来统一开 ...
- 初步了解React Native的新组件库firstBorn
first-born is a React Native UI Component Framework, which follows the design methodology Atomic Des ...
- 我在React Native中构建时获得的经验教训
by Amanda Bullington 通过阿曼达·布林顿(Amanda Bullington) 我在React Native中构建时获得的经验教训 (Lessons I learned while ...
最新文章
- Android 第三方之MPAndroidChart
- php正则表达式,数组,函数
- php 离线 gis,在 Web 页面中使用离线地图
- 【数学】拉格朗日插值(luogu 4781/金牌导航 拉格朗日插值-1)
- 同事说他的应用起不来了,因为我的代码里面多了一个空格!
- VGA、DVI、HDMI区别
- 使用selenium 驱动最新火狐浏览器出错:ConnectionAbortedError: [WinError 10053] 你的主机中的软件中止了一个已建立的连接。...
- win10连接mysql服务器频繁断线_MySQL连接数过多导致服务无法正常运行
- 2016中国APP分类排行榜参选入围产品公示
- Python读取excel生成正态分布图
- 第八届“图灵杯”NEUQ-ACM程序设计竞赛个人赛题解
- 【新东郊商城】周年店庆 关注微信,转发微博抽奖品!玩赚乐不停
- Java实现蓝桥杯单位转换
- python读取word文档中的图片_【Python 3 获取Word所有图片】
- CSS控制文本超出打点显示
- 自学python有什么建议,想通过自学Python,朋友们有哪些提议吗?
- python手机摄像头投测距_python opencv单目测距 小孔成像原理
- 猪八戒网获26亿融资 计划做全国最大在线电商平台
- C# -写个可可图片播放器
- sang三fen丰、云flashftp管理