购物车吸顶7.0无法点击问题排查

问题表现:

购物车吸顶效果在7.0的手机上无法点击选中仓库;

问题排查过程:

首先因为点击效果不能展示,根据效果猜测,可能是事件没有传递到对应的子view,经过断点调试和打log发现。DOWN,MOVE和UP事件都传递给了子view。

此时我把click和checkchanged事件都换成了setOnToucnListener,此时就可以相应到事件的效果了。根据源码分析知道,onclick事件是在onTouchEvent的内部执行的。也就是说事件其实是分发给了对应的子view,并且他能够通过dispatchTouchEvent来分发事件,但是当传递到自己的onTouchEvent里面的时候出现了问题。

Weex调研总结

1.更新方式

更新方式主要有两种,

第一种,将准备和项目一起打包的js文件放置在assets文件夹下,同时增加更新js文件的逻辑和读取更新文件的逻辑,当在apk发布之后想要更新js文件时,只要走下载逻辑,将js文件下载到自定义目录下,在加载的时候读取新的js文件即可。

这种方式的缺点在于,js文件普遍都比较大,我目前做的两个demo一个展示的功能页面是40kb,红包雨动画是16kb,如果有数十个文件,那么apk的大小也是无法保证的。

第二种,直接访问后台提供的js文件,即通过网络方式加载,类似于webview加载h5页面,此种方式可以搭配缓存策略来做。

两种方式可以配合使用,对于比较重要的页面可以放在assets下面,其他的页面可以通过初始化时进行下载,之后如果有更新可以通过和本地的文件进行版本比对,如果需要更新再下载,不需要更新就是用本地文件。变动较大的可以直接使用网络文件。

React Native loading旋转动画的实现

在决定做一次loading动画的时候,我首先看了一下官方文档:React Native Animated的使用。不过官方文档看得云里雾里,必须通过自己动手才能真正了解怎么做。

首先需要在自定义view(当然也可以不自定义,不过建议最好这种view可以自己定义防止state与其他view冲突)。在自定义view的constructor方法中,需要对动画初始值进行设置:

constructor(props) {
    super(props);
    this.state = {
        rotateValue: new Animated.Value(0),
    };
}

接着需要实现动画的逻辑rotateValue其实是作为一个会变动的值,通过值的变动来更新view的显示效果的。第二步在componentDidMount方法中执行动画:

componentDidMount() {
    this.state.rotateValue.setValue(0);
    Animated.timing(this.state.rotateValue,{
        toValue: 360*TIMES,
        duration: 800*TIMES,
        easing: Easing.linear
        }).start();// 开始spring动画
}

React Native初探

大部分简单的功能实现官方文档的说明都很清楚,我这里主要说一下我在开发过程中遇到的一些棘手的问题和解决办法

1.布局和视觉样式部分

a.RN中如何实现FrameLayout效果

如果要在RN中实现类似Android中的FrameLayout效果,需要对view的style设置 positon: ‘absolute’ ,以及一些方向属性

goods_left_label_style: {
    position: 'absolute',//相对父元素进行绝对定位
    left: 0,
    top: 0,
    right:0,
    bottom:0 //后面四个根据需要设置
},

b.等比例权重布局

要进行等比例权重布局需要使用一个重要的属性,flexDirection,该属性用于指定主轴的方向。即指定子view的布局方向。可以设置两个值分别是:row和column。感觉上类似于orientation。接着在子布局中设置flex属性就是view的权重了,类似于android中的weight。

除了flexDirection之外还有几个很重要的属性,下面说明一下他们的使用方法:

justifyContentalignItems,这两个属性是相对的,第一个是设置子View的水平方向布局,第二个是设置VIew的竖直方向布局,他们的取值有相同也有不同。这两个属性都可以取三个值,分别是flex-start,flex-end,center,意思分别是顶部对齐,底部对齐,居中对齐。

接着说他们不同的部分,justifyContent还有一个stretch属性,意思是在竖直方向上填充整个父布局;alignItems有两个分别是space-between和spage-around属性,这两个很特别在android上是没有的,space-between意思是第一个子组件位于父容器左端,最后一个子组件位于父容器最右端。然后平均分配在父容器水平方向上。space-around指所有子组件平均分配在父容器的水平方向上,左右都有留空隙。

以上的两个属性都是父布局管理子布局的属性,还有一个属性是alignSelf,他是用来单独设置组件竖直方向的样式,与alignItem类似,只是一个设置父一个设置子。

flexWrap用于设置子view是否可以换行,有两个属性可设置nowrap和wrap。nowrap:即使空间不够也不换行。wrap:空间不够的话自动换行。