我的第一个React Native App

我用了三天时间实现了一个相对比较完整的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

转载于:https://www.cnblogs.com/lovesong/p/5678056.html

我的第一个React Native App相关推荐

怎么安装aptdaemon模块_自己开发一个React Native 模块
大纲为什么需要 React Native Module 如何创建一个 React Native的模块编写 Android Toast 功能模块如何调试 React Native 模块------ ...
react native app应用更新方案
最近公司有需求做一个react native app应用更新方案,试了很多插件都不靠谱最后还是选择了搭配 rn-fetch-blob 进行封装引入 rn-fetch-blob import RN ...
开始测试React Native App（下篇）
前言: 在开始测试React Native App(上篇)中编写了redux-upload-queue针对Reducer和Action Creator的单元测试,测试代码可以在这里查阅.这篇文章基于开 ...
构建了我的第一个React Native应用程序之后，我现在确信这是未来。
by Taylor Milliman 泰勒·米利曼(Taylor Milliman) 构建了我的第一个React Native应用程序之后,我现在确信这是未来. (After building my ...
React Native App设置amp;Android版发布
React Native系列 <逻辑性最强的React Native环境搭建与调试> <ReactNative开发工具有这一篇足矣> <解决React Native ...
我如何为我的第一个自由客户构建第一个React Native应用程序
by Charlie Jeppsson 查理·杰普森(Charlie Jeppsson) 我如何为我的第一个自由客户构建第一个React Native应用程序 (How I built my firs ...
快速创建React Native App
告诉大家一个好消息,为大家精心准备的React Native视频教程发布了,大家现可以看视频学React Native了. 快速创建React Native App 查看最新的React Native ...
Android原生App跳转到React Native App
前言众所周知,react native开发是前几年较火的一个话题,随着各种框架的更新换代,一些技术也会逐渐被掩埋.本篇是楼主在项目中总结出的一些开发经验.主要讲了react native和原生的ap ...
开发 React Native APP —— 从改造官方Demo开始（二）
经过第一部分开发 React Native APP -- 从改造官方 Demo 开始(一)介绍,App 框架基本构建完成,这部分主要讨论 UI/交互.App 发布前的准备工作及如何发布,具体内容包括: ...

我的第一个React Native App

我的第一个React Native App相关推荐

最新文章

热门文章