一、说明
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
程序将会自动安装到手机或是模拟器中（需要提前接入手机或是运行模拟器），成功运行之后的效果
三、功能分析
应用打开时首先会有一个过渡界面，大约持续2s时间，过渡界面展示一张图片，伴随有图片放大的动画效果。
然后进入主界面，主界面顶部以图片轮播的形式展示热门文章，然后就是文章列表，每个文章以标题加图片的形式展现。点击左上角菜单图标，显示侧滑菜单，用户可以选择不同主题的内容，选择之后主界面的列表随之变化。其他按钮功能未实现。
四、目录结构分析
现在我们看一下源码的目录结构，
| 文件名 | 说明 |
|---|---|
| android | 存放Android原生代码 |
| art | 放了几张截图 |
| ios | 存放ios原生代码 |
| DataRespository.js | 数据仓储，提供远程访问和数据缓存功能 |
| DetailToolbar.js | 界面的标题栏组件 |
| index.android.js | android应用的入口 |
| index.ios.js | ios应用的入口 |
| MainScreen.android.js | android应用的主界面 |
| MainScreen.ios.js | ios应用的主界面 |
| SplashScreen.js | 过渡界面 |
| StoriesList.js | 文章列表组件 |
| StoryItem.js | 文章列表组件的子项 |
| StoryScreen.js | 文章详情界面 |
| SwipeRefreshLayout | 下拉刷新控件，引用原生模块 |
| ThemeList.js | 可订阅主题的列表 |
| WebView.js | 自定义的WebView，引用原生模块，用于显示文章详情 |
五、总结
本篇作为知乎日报（RN版）源码分析的第一篇，主要介绍对App的安装使用做了简单说明，并且对源码的目录结构进行了介绍，接下来我将根据应用的执行流程对源码进行分析，对其中涉及到的RN的知识点进行重点讲解，从实例源码中学习RN开发的基本技能。
