我的第一个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

分类:  3.前端框架


本文转自 海角在眼前 博客园博客,原文链接: http://www.cnblogs.com/lovesong/p/5678056.html   ,如需转载请自行联系原作者

相关文章
|
2月前
|
开发框架 前端开发 JavaScript
探索前端开发中的跨平台框架React Native
本文将介绍前端开发中一种备受关注的跨平台框架React Native,通过比较原生应用与React Native的优缺点,探讨其在实际项目中的应用以及未来发展趋势。
|
2月前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
3月前
|
前端开发 JavaScript Android开发
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
|
27天前
|
前端开发 Android开发 iOS开发
应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道,推送都可以收到,但是在App切到后台或者杀掉进程之后就收不到推送了,是需要配置什么吗?
【2月更文挑战第31天】应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道,推送都可以收到,但是在App切到后台或者杀掉进程之后就收不到推送了,是需要配置什么吗?
25 2
|
2月前
|
存储 前端开发 JavaScript
从零开始学习React Native开发
【2月更文挑战第1天】React Native是一种跨平台的移动应用程序框架,可以使用JavaScript和React来构建Android和iOS应用程序。本文将带您从零开始学习React Native开发,涵盖了基础知识、组件、样式、布局、API等方面。
|
2月前
|
前端开发 IDE 小程序
【社区每周】React Native 初探;应用中支持添加应用管理员(2月第一期)
【社区每周】React Native 初探;应用中支持添加应用管理员(2月第一期)
34 0
|
3月前
|
移动开发 前端开发 JavaScript
探究移动端混合开发技术:React Native、Weex、Flutter的比较与选择
移动端混合开发技术在移动应用开发领域日益流行,为开发者提供了更高效的跨平台开发方案。本文将比较三种主流混合开发技术:React Native、Weex和Flutter,从性能、生态系统和开发体验等方面进行评估,以帮助开发者在选择适合自己项目的技术时做出明智的决策。
|
3月前
|
移动开发 前端开发 weex
React Native、Weex、Flutter 混合开发技术的比较与选择
移动应用已经成为人们日常生活中不可或缺的一部分,而混合开发技术也随之崛起并逐渐成为主流。本文将比较 React Native、Weex 和 Flutter 三种混合开发技术,并探讨它们各自的优缺点,以及如何根据项目需求做出选择。
47 1
|
3月前
|
开发框架 Dart 前端开发
Flutter vs React Native:跨平台移动应用开发的终极对决
随着移动应用的普及,跨平台移动应用开发成为了一种趋势。Flutter和React Native是当前最受欢迎的跨平台开发框架之一,但它们各自有着不同的特点和优势。本文将对Flutter和React Native进行全方位比较,以帮助开发者了解两个框架的差异,从而选择适合自己的开发工具。
37 3
|
3月前
|
开发框架 前端开发 JavaScript
react native是什么,怎么用
react native是什么,怎么用
43 0