一、说明

react native出现有一段时间了，最近国内学习react native的人也越来越多。react native开发的资料也很多，具体可以参考：https://github.com/ele828/react-native-guide。
大家可以参考提供的资料，自学使用。年前我也断断续续学习了一段时间，今年决定好好研究一番，在实例研究中我选择了知乎日报，因为自己深受知乎日报的荼毒，源码地址：https://github.com/race604/ZhiHuDaily-React-Native。
我将分几个篇幅进行，在研究实例源码的过程中，对其中用到的知识点进行重点讲解。

二、下载安装

下载安装之前首先要搭建好react native的开发环境，参考地址：http://www.lcode.org/react-native/。
一般情况Mac下环境搭建较为简单，Windows下容易出现较多问题。
在环境搭建好之后就可以下载知乎日报的源码了

  git clone https://github.com/race604/ZhiHuDaily-React-Native

下载好之后切换到项目目录中，首先安装依赖的包，执行

  npm install

然后运行服务

  react-native start

之后，需要重新打开一个命令行窗口，再切换到项目目录中，执行

  react-native run-android

程序将会自动安装到手机或是模拟器中（需要提前接入手机或是运行模拟器），成功运行之后的效果

Paste_Image.png

三、功能分析

应用打开时首先会有一个过渡界面，大约持续2s时间，过渡界面展示一张图片，伴随有图片放大的动画效果。

splash.gif

然后进入主界面，主界面顶部以图片轮播的形式展示热门文章，然后就是文章列表，每个文章以标题加图片的形式展现。点击左上角菜单图标，显示侧滑菜单，用户可以选择不同主题的内容，选择之后主界面的列表随之变化。其他按钮功能未实现。

main.gif

四、目录结构分析

现在我们看一下源码的目录结构，

Paste_Image.png

五、总结

本篇作为知乎日报（RN版）源码分析的第一篇，主要介绍对App的安装使用做了简单说明，并且对源码的目录结构进行了介绍，接下来我将根据应用的执行流程对源码进行分析，对其中涉及到的RN的知识点进行重点讲解，从实例源码中学习RN开发的基本技能。