博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
我的第一个React Native App
阅读量:4084 次
发布时间:2019-05-25

本文共 961 字,大约阅读时间需要 3 分钟。

我用了三天时间实现了一个相对比较完整的React Native 新闻发布类型的示例。应用做得很简单,但大多React Native的组件都有用到,今天做一个分享(由于我电脑是Windows系统,所以只实现了Android部分,没有对iOS做兼容),希望对初学者有用处。

实现界面

  

  

PS:页面实现不多,数据也是静态。

安装启动程序

看完上面的,可以直接到我的Github下载源码在本地跑起来,我这个示例的地址是:

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

2. ActionSheet菜单组件:react-native-actionsheet

3. 下拉刷新、加载更多列表组件 :react-native-gifted-listview

4. 滑动Tab组件:react-native-scrollable-tab-view

PS:没有什么就上Github找,非常方便。

关键代码
1.  页面跳转,Navigator组件使用部分。
2.  Android硬件的back键操作
3.  Android状态栏沉浸式的设置
PS:不做代码解析,可直接查看代码,比较简单。

总结

我很喜欢React Native的开发方式,将页面变为一个个小组件,嵌套而成大组件,从而形成整个应用,它组件化的思想,让我真正粉上了它。

如果迫于混合应用(Hybrid App)的效果差,又没有人手做原生的应用的,真的可以考虑用它。

 

本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。

本文地址 :

你可能感兴趣的文章
国内有个码云,gitee
查看>>
原来我之前一直用的APM固件....现在很多东西明白了。
查看>>
realsense-ros里里程计相关代码
查看>>
似乎写个ROS功能包并不难,你会订阅话题发布话题,加点逻辑处理,就可以写一些基础的ROS功能包了。
查看>>
if __name__ == ‘__main__‘:就是Python里的main函数,脚本从这里开始执行,如果没有main函数则从上到下顺序执行。
查看>>
PX4官方用户和开发手册的首页面是会给你选择英文和中文的
查看>>
网络协议栈我是不是可以这么理解,就是把你要发送的数据自动处理成TCPIP格式的消息发出去,这种底层的转换不需要你弄了。
查看>>
除了LwIP还有uIP
查看>>
《跟工程师学嵌入式开发》这本书最后的终极项目我反而觉得有说头
查看>>
博士的申请考核制
查看>>
那些硬件的初始化函数主要是在做些上什么?
查看>>
MAVLink学习之路05_MAVLink应用编程接口分析(也有讲STM32下的收发函数)
查看>>
找到了中文版的mavlink手册
查看>>
浅谈飞控开发的仿真功能
查看>>
我觉得在室内弄无人机开发装个防撞机架还是很有必要的,TBUS就做得很好。
查看>>
serial也是见到很多次了,似乎它就是一种串行通信协议
查看>>
TBUS的一些信息
查看>>
PX4+激光雷达在gazebo中仿真实现(古月居)
查看>>
专业和业余的区别就在于你在基础在基本功打磨练习花的时间
查看>>
通过mavlink实现自主航线的过程笔记
查看>>