我的第一个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   ,如需转载请自行联系原作者

相关文章
|
11天前
|
机器学习/深度学习 人工智能 自然语言处理
DeepSeek Artifacts:在线实时预览的前端 AI 编程工具,基于DeepSeek V3快速生成React App
DeepSeek Artifacts是Hugging Face推出的免费AI编程工具,基于DeepSeek V3,支持快速生成React和Tailwind CSS代码,适合快速原型开发和前端组件构建。
207 28
DeepSeek Artifacts:在线实时预览的前端 AI 编程工具,基于DeepSeek V3快速生成React App
|
2月前
|
前端开发
create-react-app 如何使用 less/sass 和 react-css-modules?
本文详细介绍了在 create-react-app 项目中如何使用 less/sass 和 react-css-modules 来管理和应用样式。首先,通过安装相应依赖并配置 webpack 支持 less/sass;接着,介绍如何使用这些预处理器编写样式;最后,讲解了如何配置和使用 react-css-modules 实现样式的模块化管理,以及如何结合使用 less/sass 和 react-css-modules 提高开发效率和代码质量。
48 3
|
3月前
|
XML 前端开发 JavaScript
react学习笔记一:入门级小白到脚手架(create-react-app)开发项目
这篇文章是React的学习笔记,覆盖了从React的基础用法到高级特性,包括组件化、状态管理、生命周期、虚拟DOM等主题,适合React初学者参考。
127 0
react学习笔记一:入门级小白到脚手架(create-react-app)开发项目
|
4月前
|
XML 移动开发 前端开发
使用duxapp开发 React Native App 事半功倍
对于Taro的壳子,或者原生React Native,都会存在 `android` `ios`这两个文件夹,而在duxapp中,这些文件夹的内容是自动生成的,那么对于需要在这些文件夹中修改的配置内容,例如包名、版本号、新架构开关等,都通过配置文件的方式配置了,而不需要需修改具体的文件
|
5月前
|
前端开发 JavaScript 中间件
React脚手架create-react-app简介
【8月更文挑战第13天】React脚手架create-react-app简介
306 4
|
6月前
|
前端开发 JavaScript Android开发
React Native跨平台开发实战
【7月更文挑战第21天】React Native为跨平台移动应用开发提供了一种高效且强大的解决方案。通过本文的学习,你应该能够掌握React Native的基本概念和实战步骤,并开始在你的项目中使用React Native进行开发。随着你对React Native的深入理解,你将能够利用其强大的功能来构建更加复杂和高效的移动应用。
|
7月前
|
移动开发 小程序 开发工具
微信支付的类型分析(JSAPI+APP+H5+NATIVE+付款码+合单)
微信支付的类型分析(JSAPI+APP+H5+NATIVE+付款码+合单)
679 1
|
7月前
|
前端开发 自动驾驶 程序员
鸿蒙? 车载?Flutter? React Native? 为什么我劝你三思,说点不一样的
本文探讨了在信息技术快速发展的背景下,开发者如何选择学习路径。作者提倡使用终局思维来规划职业发展,考虑技术的长远影响。终局思维注重长远目标、系统分析、反向规划和动态调整。以车载开发为例,预测未来智能汽车可能由语音助手主导,而非依赖平板界面。此外,作者建议不要过分投入打工状态,应思考创建自己的产品,如App,以实现技能补充和额外收入。选择对未来发展和自主性有益的技术,如Kotlin,比盲目追求热点更为重要。做减法和有标准的选择,能帮助减轻焦虑,实现更高效的成长。关注公众号“AntDream”获取更多相关内容。
157 1
|
7月前
|
Dart 前端开发 JavaScript
探索移动应用开发中的跨平台解决方案:Flutter与React Native的比较
在移动应用开发领域,选择合适的跨平台解决方案是关键。本文将深入分析Flutter和React Native这两大主流框架,从性能、开发效率、社区支持等方面进行比较,帮助开发者做出明智的选择。
93 0
|
2月前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
100 9