我用了三天时间实现了一个相对比较完整的React Native 新闻发布类型的示例。应用做得很简单，但大多React Native的组件都有用到，今天做一个分享（由于我电脑是Windows系统，所以只实现了Android部分，没有对iOS做兼容），希望对初学者有用处。
实现界面
PS：页面实现不多，数据也是静态。
安装启动程序
看完上面的，可以直接到我的Github下载源码在本地跑起来，我这个示例的地址是：
https://github.com/codingforme/react-native-demo-news
1. 下载源码
可以用git clone或直接下载zip包，注意存放路径不要有中文，否则命令执行会出错。
2. 安装node module
进入工程目录安装node module，命令行：
npm install
3. 安装示例
插上真机或开模拟器来安装示例，命令行：
react-native run-android
这样就可以在手机上看到示例效果，可以结合代码学习React Native的开发套路。
PS：这里是我假设你已经装好React Native的开发环境。
额外组件
有些组件官方没有提供（没有Android版或者本身没有），于是我在Github寻找了相应的UI组件来使用，分别有：
1. Tab组件（底部导航）：react-native-tab-navigator
https://github.com/exponentjs/react-native-tab-navigator
2. ActionSheet菜单组件：react-native-actionsheet
https://github.com/beefe/react-native-actionsheet
3. 下拉刷新、加载更多列表组件 ：react-native-gifted-listview
https://github.com/FaridSafi/react-native-gifted-listview
4. 滑动Tab组件：react-native-scrollable-tab-view
https://github.com/skv-headless/react-native-scrollable-tab-view
PS：没有什么就上Github找，非常方便。
关键代码 1. 页面跳转，Navigator组件使用部分。 2. Android硬件的back键操作 3. Android状态栏沉浸式的设置 PS：不做代码解析，可直接查看代码，比较简单。总结
我很喜欢React Native的开发方式，将页面变为一个个小组件，嵌套而成大组件，从而形成整个应用，它组件化的思想，让我真正粉上了它。
如果迫于混合应用（Hybrid App）的效果差，又没有人手做原生的应用的，真的可以考虑用它。
本文为原创文章，转载请保留原出处，方便溯源，如有错误地方，谢谢指正。
本文地址 ：http://www.cnblogs.com/lovesong/p/5678056.html
相关文章
