/ react native

React Native跨平台移动应用开发实战 - 布局和导航

本文隶属于文章系列 React Native跨平台移动应用开发实战 ,讲解应用整体层面的一些东西,包括布局、导航,以及错误、进度、Loading等信息显示。

  1. 布局
  2. 导航
  3. 进度提示
  4. Loading
  5. 错误提示

布局

先来看一下完整的布局是怎样的一个效果。如下图所示,最顶部是状态栏和导航,下方紧接着的是进度条(有后台任务处理时出现,比如图片压缩),然后是内容区,页面中间是Loading图标(表明有网络请求正在进行),偏下方的位置是错误信息(出错时才有),最底部是Tab栏。

一个好的布局既要灵活满足不同页面的需求,比如有的页面没有导航条,有的没有Tab栏,还能尽量让页面不关心这些全局的界面元素。一个应用里的页面尽量使用同一个布局,这样能避免许多重复性的工作,也便于日后调整和修改。

下面是在球场的布局文件,完整的请点击底部链接查看。从中可以看到进度条、错误提示、Loading图标都是在需要的时候才会出现,导航和Tab栏也都可以控制是否显示。

导航

RN的 Navigator 做得比较底层,不是很好用。官方正准备推出新的 NavigationExperimental,从命名可以看出还处于实验阶段,生产环境慎用。笔者在github上搜索了一下,找到了 React Native Router,基本够用,但小问题也比较多。

下面是在球场应用的路由定义,最重要的两个属性是key和component。其中key是页面标识,跳转页面的时候就是使用这个属性值来表明目标页面。component为这个页面对应的组件,前面讲过我们每个页面都有一个对应的容器,这里的值就是页面对应容器的类名。

进度提示

当在后台进行一些耗时较长的任务时,比如压缩和上传大量图片,如果能给用户一个任务进度显示,用户体验会比较好。

Loading

在执行网络请求的时候,显示一个Loading图标,能够让用户知道请求已发出,避免用户重复发起请求。

错误提示

出现错误时需要给予用户反馈,让用户清楚发生了什么,然后对应去解决。如果没有错误提示,用户会认为是软件的Bug,导致流失用户。

React Native跨平台移动应用开发实战 - 布局和导航
Share this