React-Native交互设计注意事项

React-Native交互设计注意事项

一、理解开发为什么要选用React-Native?(React-Native的特性)

1,优势

1.1,开发效率高。除了一些特定的需要额外处理外,一套代码在android与ios设备上都能运行,且使用React-Native开发页面所使用的javaScript语言要比java(android)或者object-c(ios)相对要快。

1.2,体验效果较好。在没有“比较重的交互”或者“音视频地图等较为消耗性能功能”的情况下,React-Native可以达到几乎与原生App一致的体验效果。

1.3,提供热更新功能。

2,劣势

2.1,对开发人员素质与开发电脑配置相对要求较高。

2.2,开发人员对于比较复杂的页面处理起来相比原生处理会更困难。具体点在于会多出一步比较麻烦的桥接过程,将原生的功能转移到react-native平台上。

2.3,用户体验效果始终是比原生App差。React-Native是建立在原生Api的基础上,通过桥接、整合、映射等各种手段,间接的调用原生Api,因而没有直接使用性能与体验好。

二、React-Native技术选型时需要注意的点

       主旨:重在页面展示,减少需要监控页面偏移相关的功能,少用动画或者对动画不做特定限制,多使用符合react-native平台所提供的动画,尽量不做react-native平台弱势的地方,如果确实要做的话与开发人员沟通考虑部分地方使用原生页面处理。

       2.1,弹窗。React-Native提供的弹窗叫modal,其提供的动画类型只有三种:

animationType(动画类型)

none:没有动画

slide:从底部滑入

fade:淡入视野

此外,对于弹窗需要弹窗内容列表超过屏幕1/2或者2/3就需要固定滑动的效果不做。

       2.2,列表。React-Native对于列表ui绘制比较快,自带的SectionList就可以实现分组列表并且实现悬浮效果(效果图),且建议交互设计,列表要实现下拉刷新与上拉加载使用自带的效果(效果图),定制很麻烦。

       2.3,性能。常用的动画(旋转、位移、透明度变化)(效果图)都可以实现,但是react-native是单线程, 直观的感觉是复杂的页面在一些配置较低的手机上会有肉眼可见卡顿的感觉。

       2.4,按钮不做“按下去 的颜色”,react-native控件提供了很方便的颜色透明度变化,用这个代替。

       2.5,文本。React-Native对于判断固定行(比如两行)是否能够显示完全不容易处理,建议不做处理。

 

 

2019年06月15日10:47:46更新

发布了53 篇原创文章 · 获赞 14 · 访问量 6万+

猜你喜欢

转载自blog.csdn.net/liuxingyuzaixian/article/details/93379471
今日推荐