项目中遇到过的那些坑(不定期更新)。。。



  • 缘起

    事实上之前团队已经开发了一个 Android 的原生应用来支持公司内部一业务(那时候 RN 的 Android 版还没出),之所以先搞 Android,主要因为是 Java 团队,大家对 iOS 开发一窍不通。

    现在需要搞个 iOS 版了,于是决定采用 RN,毕竟小团队,实在没啥精力维护两套应用。在开始 RN 之前,已经尝试在某些 web 模块中陆续引入了 React 了,应该说 JSX+Redux+ImmutableJS 这些东东很是刷新了这些年的前端开发理念,也很是击中了一些痛点。

    坑啊。。。坑。。。

    在 iPhone 真机上调试步骤

    1. Apple 开发者账号(必须)
    2. ios/AwesomeApp/AppDelegate.m 中将 OPTION 1 下面的 jsCodeLocation 中的 localhost 改为本机 ip 地址
    3. RCTWebSocketExecutor.m 中将 localhost 改为本机 ip 地址
    4. Chrome 浏览器中输入 http://localhost:8081/debugger-ui 即可

    iPhone 真机调试出现大量 YellowBox 提示的屏蔽方法

    注:这个 bug 在0.22 上好像已经消失了,所以作废

    React/Modules/RCTTiming.m 第 178 行,将 if (jsSchedulingOverhead < -0) 改为 if (jsSchedulingOverhead < -5)
    其实这个数字可以随便整

    具体说明参见 jsSchedulingOverhead warnings

    开发环境配置

    存在一些迟滞的操作感觉的解决方式

    这个我专门发帖求助了。例如在 TabBarIOS 切换视图的时候,或者 Navigator 里面 Push 视图的时候,能够感到动画一颤颤的。

    这里面有俩优化思路:

    • InteractionManager.runAfterInteractions 这个可以把那些比较厚重的操作(例如 ajax)封装起来,等到动画执行完毕之后再执行
    • 完善 shouldComponentUpdate

    iOS Image 组件载入本地图片之后切换视图的时候经常会出现图片重新载入从而导致闪烁的问题

    Image 组件在 iOS 下面还有个 defaultSource 属性,用起来试试。

    ListView 上下滚动方向判断

    有些时候需要通过判断滚动方向来显示或者隐藏一些东西,所以可以对 ListView 做一些封装,增加个判断,具体可以参见我这个帖子

    引入 Mocha 和 Chai 测试框架

    不能直接用 babel 的 es2015 和 stage-0

    npm install babel-preset-react-native --save-dev

    "babel": {
        "presets": [
          "react-native"
        ]
      },
    

    待续。。。


  • administrators

    yellowbox还是不要随便屏蔽的好



  • @sunnylqm 这个算是个 bug,新版中已经不存在了。


登录后回复