画虎烂的专栏

很多人在技术选型的时候，会选择RN是因为它具有热更新，而且这是它的一个特性，所以实现起来会相对比较简单，不像原生那样，原生的热更新是一个大工程。那就目前来看，RN的热更新方案已有的，有微软的CodePush和reactnative中文网的pushy。实话说，这两个我还没有体验过。一来是当初选择RN是因为它不但拥有接近原生的体验感还具有热更新特性，那么就想自己来实现一下热更新，研究一下它的原理；二来，

概述在开发一款APP，对于数据的存储是在正常不过了，在此之前，【稀饭】这个应用还没有用到存储数据的地方，为了学习研究React Native的数据存储，打算给应用增加【我的收藏】和【观看历史】这两个功能。接下来，我们来看看如何实现。关于React Native数据存储的解决方案关于RN如何存储数据，有两种方案。 - AsyncStorage - SQLite第一种是官网提供的一种数据存储方案，它

概述本文是基于目前公司的一个真实项目编写的，由于是边实践边记录，遇到什么问题和如何解决的，所以你看这篇文章的时候，可能有时候会觉得不是很流畅，特此说明。引入React Nativebuild.gradle配置compile 'com.facebook.react:react-native:+'react-native的res使用到了23sdk的资源，因此编译的sdk要求是23compileSdkVe

上一节，讲了关于RN的自定义原生模块，本节是关于自定义原生UI组件，学习完本节，你将了解到原生UI组件的开发流程，以及js如何向native发送命令和native如何向js发送事件。原生UI组件之VideoView视频播放器开发React Native并没有给我们提供VideoView这个组件，那我们要播放视频的话，有两种方法：一种是借助WebView，一种就是使用原生的播放器。这里我们就介绍下，如

影片详情开发也是通过Cheerio抓取并分析网页获取到的详情数据，本节就不作为详细内容来讲解了，详细的代码可以看下我的github，效果如下：在点击播放时，会跳转到播放界面，并且横屏显示，退出播放界面时，会恢复到竖屏状态。但是，react native并没有给我们提供设置横竖屏的API，因此，我们需要自己使用原生的代码来完成此功能。使用原生代码，我们可以为react native作什么呢？一个是功

主界面开发上一节，我们已经完成了首页的开发，现在，我们继续完成主界面的开发，就是添加底部‘首页’和‘我的’两个tabbar。在js/文件夹下，新建MainScene.js文件import React,{Component} from 'react';import { View, Text, TouchableOpacity, Image, StyleShee

首页功能前面，我们已经完成了影视信息组件的开发，接下来，我们要用该组件来完成首页界面功能的开发，如下图可以看到，首页顶部一个标题栏，下面是‘最新’、‘最热’两个选项卡。我们要完成的有标题栏、选项卡、以及选项卡切换的内容。标题栏这里的标题栏，我们使用的是ToolbarAndroid，看名称我们就知道这个是android下特有的组件view，所以就立马想到，这个组件是ios、android不能通用的。因

获取网络数据在上一节，我们已经通过模拟数据，并将UI展示出来。这节我们将获取网络数据。数据来源于网络，仅用于学习使用。fetch介绍fetch是react native的一个网络请求库，使用该库不用引入模块，可以直接使用。一个简单的请求如下：fetch('http://facebook.github.io/react-native/movies.json')发起请求之后，我们还需要对它的响应进行处理

首页设计与实现首先，这章节讲的是首页内容的设计与实现，不包括主界面的设计，因为一开始入手，我希望能立马获取到数据并能展示出来，后面再来搭木积似的一步一步把整体框架做起来。设计（图丑，莫见怪~）主界面的设计如下首页的设计如下有人可能会觉得，为什么不把TitleBar抽出来放在主界面，而要单独放在每个页面里。因为，这个跟你把Navigator（页面导航器）放在什么地方有关系，现在先不说为什么，就这么认为

项目前期准备工作本系列课程实战，默认是你已经安装好react native所需的一切环境配置，如果你还没配置好，请事先看下中文官网。这里提一下，如果你在安装Chocolatey过程中出错了，一般是权限问题，你需要以管理员的身份来启动cmd命令行，然后再执行安装即可。本系列课程的开发环境：系统：win10IDE：webstorm、sublime text 3、android studio调试机：

写之前当你在看该系列教程时，我想你应该和我一样起码是有些基础了。本人是Android原生开发的，业余时间学习了下react native。学习的初衷是：很多时候，移动开发要求既要会Android也要会IOS（最好），但是学习IOS的成本摆在那里，然后听说react native开发使用js语言做移动开发，包括Android和IOS，本着对新技术极度好奇之孜孜以求，我就打开react native中文