[聚合文章] 11月总结

日子过得真快！从上海回杭州了，还是回杭州比较好一点。

换了份工作，继续做ReactNative。10月17号入职的。

从入职以来也做了不少的面板。

电扇面板

1.在这个项目中遇到的难点就是电扇的转动–一个动画，通过设置转速不同来改变旋转动画的快慢。转速和转向的设置，就是Animated的使用。

const rec = () => {
      this.state.anim.setValue(0);
      Animated.parallel([
        Animated.timing(this.state.anim, {
          toValue: 1,
          easing: Easing.linear,
          duration,
        }),
      ]).start(o => {
        if (o.finished) {
          rec();
        }
      });
    };
    rec();
  }

1. 初次使用Redux，了解了一些基础控件的使用，比如slider,picker，showMaskView，SwitchButtonX，还有重命名的一个控件。

yuerbao(env)

这个项目中我主要是在以前的项目基础上新加一个页面，新写的页面比较简单。主要问题就在于改后的面板，出现了闪退和数据没有显示的问题。。。解决方法：把bind绑定this函数，还有就是数据没有获取到。原来的代码没看懂。

yuerbaoWaterPump

这个项目的主要难点就是一个可触摸滑动的进度环。还有对应的标识点 和一个旋转的动画。

自己写的就是基于组件库中的Newpicker写的时间的picker和几个picker。

可触摸滑动的进度环：主要是用SVG来绘图，Gesture的手势的响应，触摸的位置的坐标切换到相当于圆心点的坐标。

通过滑动的初始角度和结束角度来再次绘图SVG。同时改变标识点的位置。

标识点：用SVG中的circle来绘制，通过手势滑动的位置，来改变小圆点的位置。

旋转的动画：遇到的问题：在关机或者是退出后再进去动画不能连续或者是出现了多个动画的重叠。解决方法：开始动画的时候把状态设置为true，停止动画设置为false，

this.animating = true;
    rotateAnim.setValue(0);
    Animated.timing(rotateAnim, {
      toValue: 1,
      duration,
      easing: Easing.linear,
    }).start(() => {
      if (this.animating) {
        this.startAnimation();
      }
    });

lowPro

感觉好像是纯体力活，没什么复杂页面和逻辑交互，就是历史记录的处理也是用的以前的一套。

cooker

这个项目中的逻辑比较复杂，就是各种状态的不同的页面。

难点就是在每种模式运行的时候要倒计时。同时刻度要变化。倒计时和刻度的变化要同步，同时后端每隔30秒传回数据来修正时间。用setTimeout好于用serInterval。

// 倒计时
  countdownHandle = () => {
    const handle = () => {
      let { time } = this.state;
      time -= 1;
      this.setState({ time });
      this.countdownHandle();
    };
    if (this.state.time > 0) {
      this.timerId = setTimeout(handle, 1000);
    }
  };

倒计时和刻度的变化要同步:fixDegreeAndBindToInstance更新角度，mapValueToDeltaDeg。通过最后的角度/总的格子数。来算出每一个的角度

switch

这个项目中复杂的地方就是多个开关要区分不同的ID。

业务逻辑方面理解不到位，在点击配对开关后要置灰。并且根据返回的配对结果来显示不同的成功和失败的页面。配对以后的开关才能进行清除操作。才能进行点击。

技术总结以及学习巩固的方向：

1.熟悉JS的语法：this的绑定。何时才能取到this（static方法如：defaultProps和PropTypes取不到）

2.研究ReactNative的源码，搞清楚RN的生命周期。

3.如何使用react-native-SVG来绘图，以及如何使用Animated来做动画。

4.如何使用Redux来管理整个项目：当后台实时的改变数据以后，前端页面也能够实时的变化，了解数据的流向，Redux就是一种思想，在新数据获取到后再RN的生命周期中何时setState。Redux中的action、reducer、store、type和router来实现mapStateToProps，做到实时的与服务器交互数据。（因为setState是异步的，可能不能保证数据的同步）

5.对于Gesture和一些动画的角度设置还有具体的分析还有待提高

6.代码的规范方面要注意：代码规范符合eslint，国际化的问题和不同屏幕的适配。

生活方面

多运动，办了健身卡，希望可以尽快学会游泳，要时常健身，打球，业余时间还想学习一下机器学习、人工智能方面的算法的东西来写论文，有空还想学习一下如何理财的知识，以后可以用的上。