ReactNative跨平台开发系列教程:

带你从零学ReactNative开发跨平台App开发(一)

带你从零学ReactNative开发跨平台App开发(二)

带你从零学ReactNative开发跨平台App开发(三)

带你从零学ReactNative开发跨平台App开发(四)

带你从零学ReactNative开发跨平台App开发(五)

带你从零学ReactNative开发跨平台App开发(六)

带你从零学ReactNative开发跨平台App开发(七)

hot:更多>>

今天早上九点起来撸码的,心情美滋滋。废话不多说,开始撸码,你准备好了吗?另外本系列文章的源码已经上传到github,请自行获取!


预加载|缓存

expo中提供了一个 AppLoading 的方法,你可以用它去干一些后台加载数据,缓存之类 的工作,当他没有缓存完成需要的资源时,你的screen是不会显示出来的,所以这个方法,我个人感觉总是那么的蹩脚。上个图说明一下:

在上图中屏幕会出现卡白的情况,什么原因呢?我让其在AppLoading ,app加载的时候干了一些加载资源的事情,右图是我模拟的加载资源,用的for循环,结果程序启动,他就会走apploading,干他里面的事情,所以应用程序就会卡白,显然这不是我们想要的,下面我们尝试一下splash,我可以用splash。

搞了我的笑了,splash在expo中配置文件配置一些就可以了,

如果这样的话,我就还是不满意,大家可以放肆的去用第三方了,甚至我自己洗的那一个也凑合。

这里推荐两个第三方,不一定是最好的但是是我找到的。

splash一       splash二

既然这里写到了splash,我也好好的回顾一些很久以前写到一篇文章:react native 第一次下载app的欢迎页+每次启动app的启动页设计 顺便在本项目中实现一下。

貌似有点小问题,上次我在原生混合模式里,往<Image> 组件里添加子组件没有报错,这次在expo里,他不让我这样操作,很是尴尬!

所以啊,我建议做splash就直接用第三方吧,简单粗暴省事!

这个splash我就不想提及了,下面说一下 Push Notifications,消息推送服务

Push Notifications|消息推送

简单的测试了一下他的推送api,说我没有注册,如图:

出现这个错误原因很正常,官方给出的是:DeviceNotRegistered: the device cannot receive push notifications anymore and you should stop sending

messages to the given Expo push token.

expo 消息推送不允许模拟器|仿真机测试,我用postman当然不行了,所以我们要改用真机,测试消息推送!

模拟器上推送依然报错:

换真机--今天就不吃瓜了,明天继续吃!我要体验大微软的跨平台去了!

这个项目我发布了一下:https://expo.io/@dongsheng/myappxde   可以在这里用expo扫码看一下,样式特别丑!

另外想说一下,expo现在最高版本是24.0.0

它和ReactNative版本对应:17.0.0→0.44|   18.0.0→0.45|   19.0.0→0.46|   20.0.0 →0.47|   21.0.0 →0.48|   22.0.0 →0.49|   23.0.0 →0.50|   24.0.0 →0.51

由此可以推出,expo是一个多么新的派生物种...


我的github地址 项目在这里找到!

后续文章持续更新,敬请期待!

文章为作者原创,转载请注明出处。

带你从零学ReactNative开发跨平台App开发(六)的更多相关文章

  1. 带你从零学ReactNative开发跨平台App开发(二)

    ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发 ...

  2. 带你从零学ReactNative开发跨平台App开发(一)

    ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发 ...

  3. 带你从零学ReactNative开发跨平台App开发-[react native 仿boss直聘](十三)

    ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发 ...

  4. 带你从零学ReactNative开发跨平台App开发(十一)

    ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发 ...

  5. 带你从零学ReactNative开发跨平台App开发(十)

    ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发 ...

  6. 带你从零学ReactNative开发跨平台App开发(九)

    ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发 ...

  7. 带你从零学ReactNative开发跨平台App开发[expo 打包发布](八)

    ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发 ...

  8. 带你从零学ReactNative开发跨平台App开发(七)

    ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发 ...

  9. 带你从零学ReactNative开发跨平台App开发(五)

    ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发 ...

随机推荐

  1. postman创建mocker Server

    为了不影响前端开发的进度,一般后端都是先定数据结构,然后写个假接口让前端调用,这样前端就不必等着后端接口开发完成以后再开始了. 届时,前后端以及UI和测试就可以并行,待双方都把各自的逻辑写好了,便可以 ...

  2. (转)mysql5.7 根据二进制文件mysqlbinlog恢复数据库 Linux

    原文:http://blog.csdn.net/qq_15058425/article/details/61196085 1.开始mysqlbinlog日志功能 先找打my.cnf文件的位置: 2.编 ...

  3. C++ STL 初探

    学过C++的人肯定会很熟悉STL标准模板库,STL其实就是封装了一系列的接口,供我们调用.很多函数或者算法的实现不需要我们从头开始写,大大提高我们的编程效率.这篇博客在简单介绍STL的情况下,会详细的 ...

  4. Selenium Web自动化 原理

    文章转自 白月黑羽教Python 原理 说到web应用自动化测试,第一选择就是 Selenium 框架. Selenium 是一个 Web 应用的自动化框架. 通过它,我们可以写出自动化程序像人一样( ...

  5. 数据库学习---SQL基础(二)

    数据库学习---SQL基础(一) 数据库学习---SQL基础(二) 数据库学习---SQL基础(三) 上篇复习的sql的增删改查,and ,or ,>=, <=,!=等逻辑运算符,还有in ...

  6. nuxt踩过的坑

    nuxt.js 简单介绍 nuxt官网:https://zh.nuxtjs.org/ 1.nuxt.js的原理图: 具体的原理介绍官网有详细的解释,欢迎移步官网,这里不再复述. 2.nuxt.js的优 ...

  7. js判断手机是否安装了某一款app,有则打开,没有去下载

    function openApp(){ if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { var loadDateTime = new ...

  8. ruby大神与菜鸟的代码区别

    之前Brand类   has_and_belongs_to_many :categories, index: true 现在在Category类 增加 has_and_belongs_to_many ...

  9. HDU 2682 Tree(Kruskal算法求解MST)

    题目: There are N (2<=N<=600) cities,each has a value of happiness,we consider two cities A and ...

  10. Wirshark 显示过滤器

    二层显示过滤: eth.addr==<MAC Address>:只显示具有指定mac地址 eth.src==<MAC Address>:只显示具有指定源MAC地址的数据帧 et ...