总结一下今年的react native 填坑之旅,已双端上线



  • 一套代码双端上线,互联网产品,页面100左右,复杂逻辑页面、复杂交互组件若干,接入相册,音频,地图,分享,第三方支付。

    ES6
    1、() => {} 箭头函数在RN里面尤为重要,扮演着bind(this)的作用,从此就可以告别闭包了。
    2、promise在写法上没有async/await简洁好用,async/await直接把异步写出了同步的感觉。
    3、… 这样语法糖也是简化了太多的代码。
    4、util和api可以用static关键字

    ScrollView
    1、可以用onScroll来监听滑动的距离等参数。
    2、可以用horizontal配合pagingEnabled来实现横屏轮播图。
    3、有一个scrollTo方法可以控制滑动位置。
    4、当我想做一个更复杂的跨平台组件的时候发现好像缺个东西,滑动结束,于是我在源码里发现了这两个onScrollEndDrag,onMomentumScrollEnd,于是就写出了日历,下拉刷新,选择器,侧滑按钮等跨平台组件。选择器组件地址https://github.com/yjy5264/react-native-roll-picker
    5、pagingEnabled只能实现一个ScrollView宽度的分页,所以我用两个ScrollView重叠结合动画实现了卡片样式的轮播图,轮播图组件地址https://github.com/yjy5264/react-native-card-carousel

    Navigator
    1、用跳转时判断当前路由是否等于即将跳转路由可以解决重复跳转的问题。
    2、使用popToRoute()而不是_popN()来实现返回N个路由,从而避免网络延迟点击多次造成闪退的问题。

    Text
    不同的字体大小对应Text的上下空白高度不同,而且安卓和iOS还不一样,对于像我这种强迫症患者,还是推荐使用flex来定义Text的布局。

    WebView
    安卓某些低版本不支持注入JS代码,所以在WebView高度自适应的问题上采用的是网站加载结束返回网站高度给URL(#height),WebView监听URL变化并得到height

    动画与手势
    1、结合动画与手势可以做到手势跟随到效果,抽屉组件地址https://github.com/yjy5264/react-native-pan-drawer
    2、RN的手势好像并不支持多点触控,我测试的时候同时间只有一个点有效,所以没有用RN实现图片缩放的功能。

    原生组件
    1、接入了高德地图,QQ微博微信分享,还有支付宝支付这些需要分别写iOS和android的原生SDK。
    2、相册这块使用的react-native-image-picker。

    以上只是我一些不成熟的见解,仅供学习交流,有什么不对或者可以更好的地方,望各位指正。另外如果觉得我开源的组件还可以,star it



  • @yjy5264 说:

    2、RN的手势好像并不支持多点触控,我测试的时候同时间只有一个点有效,所以没有用RN实现图片缩放的功能。

    这个是有的。react-native-image-zoom可以实现缩放。

    Navigator
    ====我有个问题,我pop回到首页的时候,首页不会触发componentWillMount,componentDidMount,请问一下你碰到过么,然后你用的是哪个组件了?

    原生组件
    2、相册这块使用的react-native-image-picker。
    ====这个控件,拍摄出来的图片在保存图片之前就反馈了地址,你没有碰到问题么?



  • @llyzq1987

    1、在pop之前用DeviceEventEmitter发出事件,首页监听事件。或者在redux框架下面也可以解决这种跨界面交互的问题。
    componentWillMount,componentDidMount只有在component被创建的时候才会调用,返回时component是已存在的,push的时候没有被销毁,不是新创建出来的。

    2、我没有遇到,不知道你有没有判断response.didCancel。不过这个react-native-image-picker并没有兼容所有的安卓版本,有个红米测试机就用不了。



  • @yjy5264205

    2、我没有遇到,不知道你有没有判断response.didCancel。不过这个react-native-image-picker并没有兼容所有的安卓版本,有个红米测试机就用不了。
    ====我看过源码了,他判断的是 如果正确继续,其他都算didCancel。我说的就是安卓的源码里面,他反馈地址的时候,视频还没准备好,你调用会出错。。。图片很小,这个问题应该很难发生。



  • 图片放大缩小 我用scrollview



  • @llyzq1987
    嗯嗯,视频我只是试过一下,没有用在产品里面



  • @小霖
    安卓是用不了的吧,RN双端适配到处是坑



  • @llyzq1987 pop回去的页面本来就不会触发componentWillMount,因为已经在缓存里面了



  • @twelvescore
    iOS原生的will就能触发,在页面要显示的时候触发。



  • 列表是怎么做的,如果单单使用listview不会因为内存问题闪退么



  • 楼主产品名字是啥,市场上有吗?



  • @WhynoChinese
    github上有cell重用方案,不过我们的产品没有使用,因为目前没有出现大量的cell(< 500),和原生体验几乎一致



  • 请问一下,在做WebView自适应高度的时候,是否有碰到过部分手机获取高度异常?我碰到部分手机,Reload后第一次返回的网站高度是正常的,但是navagator返回上一页后重新进入,返回的高度变得很大。


登录后回复