由于我是android开发过渡到学习react-native的，所以对于一些web的状态管理方案不是很了解，比如说遇到多界面的异步刷新，直接使用回调的方式显得相当麻烦，到处留下接口，导致项目结构混乱，但在android中只需要使用广播，eventbus或者rxbus就可以解决的问题。我了解到react-redux这个东西，就是一个状态管理的解决方案，后来我发现，更多人推荐使用mobx去替换react-redux因为这个东西使用更简洁，更易于上手。当一个项目越来越庞大的时候，我们发现界面存在很多公共的逻辑，是不需要重复去写的，封装避免冗余代码这个工作是必不可少的，对比android，我们可以使用BaseActivity来封装公共逻辑，在react中最初我了解到mixin这个东西可以实现公共逻辑的封装，但是mixin不支持es6，所以最后采用了高阶组件的方式封装组件的base层，执行组件的公共逻辑。接下来详细介绍实现过程。

mobx基础

当我第一次看到mobx的时候我觉得它就是观察者模式，和android中的mvvm架构实现是差不多的。

mobx术语

主要是4个，可观察的状态，计算值，状态反应，触发动作

定义数据类

可观察的状态

通过@observable去标记变量，如对象，数组等，添加了可观察的功能。

1
2

@observable count;
@observable name;

根据状态得到计算值

1
2
3

@computed get msg() {
   return `${this.name} say count is ${this.count}`;
 }

状态变化时的反应

autorun 方法需要传入数据类的实例，在可观察的变量被修改时调用

1
2
3

autorun(() => {
  console.log(appState.msg);
});

触发修改状态的动作

通过定义的动作方法修改状态的值

1
2
3
4
5
6

@action add() {
   this.count += 1;
 }
@action changeName(name) {
   this.name = name;
 }

整个数据类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

export default class AppState {
  @observable count;
  @observable name;
  @computed get msg() {
    return `${this.name} say count is ${this.count}`;
  }
  @action add() {
    this.count += 1;
  }
  @action changeName(name) {
    this.name = name;
  }

  // 返回json格式化数据
  toJson() {
    return {
      count: this.count,
      name: this.name,
    }
  }
}

在组件中使用

在index中注入数据类的实例对象，通过props传入到内部组件

1
2
3
4
5
6
7
8
9
10

import AppState from './store/app-state';
class Root extends React.Component {
    render() {
      return (
        <Provider appState={new AppState()}>
          <App />
        </Provider>
      );
    }
  }

在组件内监听，用@observer标记组件，@inject(‘appState’)注入数据类，通过props获取到数据类实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

import React from 'react'
import {
  observer,
  inject,
} from 'mobx-react';
import PropTypes from 'prop-types';
import { AppState } from '../../store/app-state';

@inject('appState') @observer
export default class TopicList extends React.Component {
  constructor() {
    super();
    this.changeName = this.changeName.bind(this);
  }

  componentDidMount() {
    // do something here

  }

  changeName(event) {
    this.props.appState.changeName(event.target.value);
  }

  render() {
    return (
      <div>
        <input type="text" onChange={this.changeName} />
        <span>{this.props.appState.msg}</span>
      </div>
    );
  }
}
TopicList.propTypes = {
  appState: PropTypes.instanceOf(AppState),
};

利用高阶组件封装组件的base层

高阶组件Higher Order Component简称HOC，是一个使用函数来实现的类工厂，接收一个React.Component的参数，这个参数必须传，我们可以定义为WrappedComponent，代表被包裹的组件，返回一个React.Component的对象，就是包裹后的新组件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

export const HighOrderComponent = (WrappedComponent, title) => {
    return class HOC extends React.Component {
        // 公共state初始化
        constructor(props) {
            super(props);
            this.state = {
                username: ''
            }
        }
        
        // 公共逻辑处理
        componentWillMount() {
            let username = localStorage.getItem('username');
            this.setState({
                username: username
            });
        }
        
        // 界面渲染的公共部分
        render() {
            return(
                <div>
                    <View>{title}</View>
                    <WrappedComponent {...this.props} username={this.state.username}></WrappedComponent>
                </div>
            )
        }
    }
}

我们可以在这个类中操作props，对props的增删改查，可以通过Refs访问到组件实例，对state做处理，也可以用其他的组件包裹WrappedComponent。作为组件的base层，在这里处理公共逻辑，使用的时候传入被包裹的组件。

1
2
3
4
5
6
7
8
9
10

class Index extends React.Component {
    render() {
        return(
            <View>
                <Text>Hi {this.props.username}</Text>
            </View>
        )
    }
}
export const HighOrderIndex = HighOrderComponent(Index, 'Index title');

最近又是很长一段时间没写文章了，忙着学习webpack，react，react-router，eslint，babel，mobx，一系列框架，开源的SimpleOne项目也在持续维护，把以前的ES5语法改为ES6，移除了react-timer-mixin这个模块，当然这个项目中的某些技术点需要总结，接下来的几篇会对这些技术点做一个记录。我们的app经常会用到长列表的展示方式，显示内容过多，大多数情况会用到分页加载，滑动到列表的底部，通过加载更多的方式，显示下一页的内容，看起来是一页，其实是多页拼接的长列表。一般我们的列表都有下拉刷新，但是这些react-native没有封装好的组件，我们需要自己实现，下面详细记录实现过程，如果你有更好的实现方式，希望一起学习讨论。

当前的效果图gif：

要实现下拉刷新和加载更多，需要对scrollview做一个扩展，对scrollview的滑动事件做监听和逻辑处理，利用官方的PanResponder 做手势识别，显示一个自定义的顶部下拉刷新视图，所以我们可以利用react-native现有的组件封装一个支持下拉刷新和加载更多的view来实现我们的需求。这里我们定义下拉刷新的动画是一个常见的图片旋转+文字提示。

对ScrollView封装和使用

封装ScrollView实现下拉刷新和加载更多

首先，定义下拉到位时距离顶部的高度，默认下拉到位的时长，默认顶部刷新视图的高度，下拉刷新提示文字的显示状态，主要是4个状态，默认状态，正在下拉状态，下拉到位状态，和下拉释放状态。

1
2
3
4
5
6
7
8
9

const defaultDuration = 300; //默认时长
/**
 * 提示文字的显示状态
 * @type {{pulling: boolean, pullok: boolean, pullrelease: boolean}}
 */
const defaultState = {pulling: false, pullok: false, pullrelease: false}; //默认状态
const statePulling = {pulling: true, pullok: false, pullrelease: false}; //正在下拉状态
const statePullok = {pulling: false, pullok: true, pullrelease: false}; //下拉到位状态
const statePullrelease = {pulling: false, pullok: false, pullrelease: true}; //下拉释放状态

接下来是定义手势判断

1
2
3
4
5
6
7
8
9
10
11
12

//向下手势
const isDownGesture = (x, y) => {
    return y > 0 && (y > Math.abs(x));
};
//向上手势
const isUpGesture = (x, y) => {
    return y < 0 && (Math.abs(x) < Math.abs(y));
};
//垂直方向手势
const isVerticalGesture = (x, y) => {
    return (Math.abs(x) < Math.abs(y));
};

定义我们自定义的组件PullScollView继承自Component，定义默认值，传参类型，在构造函数中初始化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

static defaultProps = {
       topRefreshHeight: 50, //顶部刷新视图的高度
       pullOkMargin:100 //下拉到位状态时距离顶部的高度
}

static propTypes = {
       topRefreshHeight: PropTypes.number,
       pullOkMargin: PropTypes.number,
       onPulling: PropTypes.func,
       onPullOk: PropTypes.func,
       onPullRelease: PropTypes.func,
       onLoadMore: PropTypes.func,
       onScroll: PropTypes.func,
       children: PropTypes.array,
       style: PropTypes.object,
       loadMoreState: PropTypes.number,
       onRetry: PropTypes.func,
}
   
constructor(props) {
       super(props)
       this.defaultScrollEnabled = false
       this.topRefreshHeight = this.props.topRefreshHeight
       this.defaultXY = {x: 0, y: this.topRefreshHeight * -1}
       this.pullOkMargin = this.props.pullOkMargin
       this.state = Object.assign({}, props, {
           pullPan: new Animated.ValueXY(this.defaultXY), //下拉区域
           scrollEnabled: this.defaultScrollEnabled, //滚动启动
           height: 0,
       })
       // 滚动监听
       this.onScroll = this.onScroll.bind(this)
       // 布局监听
       this.onLayout = this.onLayout.bind(this)
       // 下拉状态监听
       this.isPullState = this.isPullState.bind(this)
       // 下拉未到位，重置回调
       this.resetDefaultXYHandler = this.resetDefaultXYHandler.bind(this)
       // 数据加载完，重置归位
       this.resolveHandler = this.resolveHandler.bind(this)
       // 顶部绘制
       this.renderTopRefresh = this.renderTopRefresh.bind(this)
       // 默认顶部绘制
       this.defaultTopRefreshRender = this.defaultTopRefreshRender.bind(this)
       // 多点触摸识别
       this.panResponder = PanResponder.create({
           onMoveShouldSetPanResponder: this.onShouldSetPanResponder.bind(this),
           onPanResponderMove: this.onPanResponderMove.bind(this),// 最近一次的移动距离为gestureState.move{X,Y}
           onPanResponderRelease: this.onPanResponderRelease.bind(this),//放开了所有的触摸点，且此时视图已经成为了响应者。
       })
       this.setPullState(defaultState)// 设置提示文字的默认状态

   }

PanResponder手势响应回调中的处理

1
2
3
4
5
6
7
8
9
10
11
12
13

// 手势响应回调，是否处理
  onShouldSetPanResponder(e, gesture) {
      //非垂直手势不处理
      if (!isVerticalGesture(gesture.dx, gesture.dy)) {
          return false;
      }
      if (!this.state.scrollEnabled) {
          this.lastY = this.state.pullPan.y._value;
          return true;
      } else {
          return false;
      }
  }

PanResponder手势移动回调中的处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

// 手势移动的处理
    onPanResponderMove(e, gesture) {
        if (isUpGesture(gesture.dx, gesture.dy)) { //向上手势
            // 如果处于下拉状态，重置
            if(this.isPullState()) {
                this.resetDefaultXYHandler();
            } else { // 恢复到默认位置
                this.scroll.scrollTo({x:0, y: gesture.dy * -1});
            }
            return;
        } else if (isDownGesture(gesture.dx, gesture.dy)) { //向下手势
            // 设置下拉区域
            this.state.pullPan.setValue({x: this.defaultXY.x, y: this.lastY + gesture.dy / 2});
            if (gesture.dy < this.topRefreshHeight + this.pullOkMargin) { //正在下拉
                // 之前状态不是正在下拉状态，调用正在下拉回调
                if (!this.curState.pulling) {
                    this.props.onPulling && this.props.onPulling();
                }
                // 记录当前为下拉状态
                this.setPullState(statePulling);
            } else { //下拉到位
                // 之前状态不是下拉到位状态，调用下拉到位回调
                if (!this.state.pullok) {
                    this.props.onPullOk && this.props.onPullOk();
                }
                // 记录当前为下拉到位状态
                this.setPullState(statePullok);
            }
        }
    }

PanResponder手势释放回调中的处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

// 手势释放
    onPanResponderRelease() {
        if (this.curState.pulling) { // 之前是下拉状态
            this.resetDefaultXYHandler(); //重置状态
        }
        if (this.curState.pullok) { // 之前是下拉到位状态
            // 之前没有松开
            if (!this.curState.pullrelease) {
                // 之前是刷新中，调用数据处理回调
                if (this.props.onPullRelease) {
                    this.props.onPullRelease(this.resolveHandler);
                } else { // 重置
                    setTimeout(() => {this.resetDefaultXYHandler()}, 3000);
                }
            }
            this.setPullState(statePullrelease); //记录当前状态为完成下拉，已松开
            // 刷新view 的下拉动画开启
            Animated.timing(this.state.pullPan, {
                toValue: {x: 0, y: 0},
                easing: Easing.linear,
                duration: defaultDuration
            }).start();

            // 刷新视图中的转圈动画开启
            this.spin();
        }
    }

下拉重置，注意这里需要停止转圈的动画，根据当前剩余的变化值去初始化动画，如果没有这个操作，可能导致后面几次下拉刷新显示的刷新视图动画异常。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/** 数据加载完成后调用此方法进行重置归位*/
   resolveHandler() {
       if (this.curState.pullrelease) { //仅触摸松开时才触发
           this.resetDefaultXYHandler();
       }
   }

   // 重置下拉
   resetDefaultXYHandler() {
       this.curState = defaultState;
       this.state.pullPan.setValue(this.defaultXY);
       this.state.spinValue.stopAnimation(value => {
           console.log('剩余时间' + (1 - value) * 3000);
           //计算角度比例
           this.animation = Animated.timing(this.state.spinValue, {
               toValue: 1,
               duration: (1 - value) * 3000,
               easing: Easing.linear,
           });
       });
   }

实现刷新视图中的循环转圈动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// 转圈动画
 spin () {
   this.animation.start((result)=>{
         //正常转完1周,继续转
         if (Boolean(result.finished)) {
             this.animation = Animated.timing(
                 this.state.spinValue,
                 {
                     toValue: 1,
                     duration: 3000,
                     easing: Easing.linear
                 }
             );
             this.state.spinValue.setValue(0);// 每次转完都要重置
             this.spin();
         }
     });
 }

我们仍然需要对scrollview的滑动事件做一个监听，这里我们需要过滤一个临界状态，当列表已经滑动到顶部，但还没有触发下拉刷新的状态，不允许继续滚动。滑动监听实现加载更多，先获取到垂直方向的滑动距离，列表的高度，内容的高度，当滑出去的距离加上列表的高度大于等于内容高度时触发加载更多，这里给个20的偏移量。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// scrollview 的滚动回调
  onScroll(e) {
      if (e.nativeEvent.contentOffset.y <= 0) { //临界状态，此时已经到列表顶部，但是还没触发下拉刷新状态
          this.setState({scrollEnabled: this.defaultScrollEnabled})
      } else if (!this.isPullState()) {  //当前不是下拉状态允许滚动
          this.setState({scrollEnabled: true})
      }
      let y = e.nativeEvent.contentOffset.y;
      // console.log('滑动距离' + y);
      let height = e.nativeEvent.layoutMeasurement.height;
      // console.log('列表高度' + height);
      let contentHeight = e.nativeEvent.contentSize.height;
      // console.log('内容高度' + contentHeight);
      // console.log('判断条件' + (y + height));
      if (y + height >= contentHeight - 20) {
          console.log('触发加载更多');
          this.props.onLoadMore && this.props.onLoadMore()
      }
      // 调用外部的滑动回调
      this.props.onScroll && this.props.onScroll(e)
  }

处于下拉过程判断

1
2
3
4

//处于下拉过程判断
isPullState() {
    return this.curState.pulling || this.curState.pullok || this.curState.pullrelease;
}

设置当前处于的下拉状态

1
2
3
4
5
6
7

// 设置当前的下拉状态
 setPullState(pullState) {
     if (this.curState !== pullState) {
         this.curState = pullState;
         this.renderTopRefresh();
     }
 }

根据当前的下拉状态，完成下拉刷新部分的重绘：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

// 绘制下拉刷新
   renderTopRefresh() {
       let { pulling, pullok, pullrelease } = this.curState;
       return this.defaultTopRefreshRender(pulling, pullok, pullrelease);
   }


   /**
    使用setNativeProps解决卡顿问题
    绘制默认的下拉刷新
    */
   defaultTopRefreshRender(pulling, pullok, pullrelease) {
       //控制下拉刷新提示文字显示状态
       setTimeout(() => {
           if (pulling) {
               this.txtPulling && this.txtPulling.setNativeProps({style: styles.show});
               this.txtPullok && this.txtPullok.setNativeProps({style: styles.hide});
               this.txtPullrelease && this.txtPullrelease.setNativeProps({style: styles.hide});
           } else if (pullok) {
               this.txtPulling && this.txtPulling.setNativeProps({style: styles.hide});
               this.txtPullok && this.txtPullok.setNativeProps({style: styles.show});
               this.txtPullrelease && this.txtPullrelease.setNativeProps({style: styles.hide});
           } else if (pullrelease) {
               this.txtPulling && this.txtPulling.setNativeProps({style: styles.hide});
               this.txtPullok && this.txtPullok.setNativeProps({style: styles.hide});
               this.txtPullrelease && this.txtPullrelease.setNativeProps({style: styles.show});
           }
       }, 1);
       // 初始化旋转角度
       const spin = this.state.spinValue.interpolate({
           inputRange: [0, 1],
           outputRange: ['0deg', '1080deg']
       });
       // 绘制下拉刷新view
       return (
           <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', height: defaultTopRefreshHeight}}>
               <Animated.Image
                   style={{
                       width: 23,
                       height: 23,
                       transform: [{rotate: spin}] ,
                       position:'absolute',
                       left:24
                   }}
                   source={{uri: 'default_ptr_rotate'}}
               />

               <Text ref={(c) => {this.txtPulling = c;}} style={styles.hide}>{tipText.pulling}</Text>
               <Text ref={(c) => {this.txtPullok = c;}} style={styles.hide}>{tipText.pullok}</Text>
               <Text ref={(c) => {this.txtPullrelease = c;}} style={styles.hide}>{tipText.pullrelease}</Text>
           </View>
       );
   }

测量宽高，动态设置自定义view的宽高，绘制整个自定义view以及该组件内部包含的子view

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

// 获得测量的宽高，动态设置
    onLayout(e) {
        if (this.state.width !== e.nativeEvent.layout.width || this.state.height !== e.nativeEvent.layout.height) {
            this.scrollContainer.setNativeProps({style: {width: e.nativeEvent.layout.width, height: e.nativeEvent.layout.height}});
            this.width = e.nativeEvent.layout.width;
            this.height = e.nativeEvent.layout.height;
        }
    }



 render() {
        return (
            <View style={[Refresh.styles.wrap, this.props.style]} onLayout={this.onLayout}>
                <Animated.View style={[this.state.pullPan.getLayout()]}>
                    {/*绘制下拉刷新view*/}
                    {this.renderTopRefresh()}
                    {/*绘制里面的子view*/}
                    <View ref={(c) => {
                        this.scrollContainer = c
                    }} {...this.panResponder.panHandlers} style={{width: this.state.width, height: this.state.height}}>
                        <ScrollView {...this.props} ref={(c) => {
                            this.scroll = c
                        }} scrollEnabled={this.state.scrollEnabled} onScroll={this.onScroll}>
                            {this.props.children}
                             {/*绘制加载view*/}
                            <LoadMore state={this.props.loadMoreState} onRetry={() => this.props.onRetry()}/>
                        </ScrollView>
                    </View>
                </Animated.View>
            </View>
        )
    }

设置默认提示文本和自带样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// 默认提示文本
const tipText = {
    pulling: "下拉刷新...",
    pullok: "松开刷新......",
    pullrelease: "刷新中......"
};

// 自带样式
const styles = StyleSheet.create({
    wrap: {
        flex: 1,
        flexGrow: 1,
        flexDirection: 'column',
        zIndex:-999,
    },
    hide: {
        position: 'absolute',
        left: 10000
    },
    show: {
        position: 'relative',
        left: 0
    }
});

在业务代码中使用

1
2
3
4

<PullScrollView style={{flex: 1, backgroundColor: 'white'}}
                onPullRelease={this.onPullRelease}>
    ...
</PullScollView>

这里注意在onPullRelease中一定要调用resolve()让下拉刷新重置

1
2
3
4
5
6

onPullRelease(resolve) {
    //刷新完毕，重置下拉刷新，再次更新刷新和加载更多状态
    setTimeout(() => {
        resolve();
    }, 3000);
}

我们需要在触发加载更多，发起网络请求时显示一个加载更多的loadingview，通过loading参数传值控制当前是否显示，同样简单封装一下，这里加了一个逐个展示小圆点的组合动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182

const pointsNum = 3; //点数量

class LoadMore extends Component {
    constructor(props) {
        super(props)
        // 初始化点的数量
        this.arr = []
        for (let i = 0; i < pointsNum; i++) {
            this.arr.push(i)
        }
        // 初始化动画
        this.animatedValue = []
        this.arr.forEach((value) => {
            this.animatedValue[value] = new Animated.Value(0)
        })
        this.state = {
            curState: this.props.state
        }

    }

    componentDidMount(){
        this.isMount = true
    }

    componentWillUnmount(){
        this.isMount = false
    }
    /**
     * 动画执行，逐个显示
     */
    animate() {
        this.arr.forEach((value) => {
            this.animatedValue[value].setValue(0);
        })
        const animations = this.arr.map((item) => {
            return Animated.timing(
                this.animatedValue[item],
                {
                    toValue: 1,
                    duration: 200,
                    easing: Easing.linear
                }
            )
        })
        this.loadingAnim = Animated.sequence(animations)
        this.loadingAnim.start((result) => {
            if (Boolean(result.finished)) this.animate()
        })
    }

    render() {
        return (
            <View style={[styles.container]}>
                {this.state.curState !== LoadMoreState.state.hide ? this.renderLoad() : null}
            </View>
        )
    }


    componentWillReceiveProps(nextProps) {
        this.setState({
            curState: nextProps.state
        })
        switch (nextProps.state) {
            case LoadMoreState.state.loading:
                if (this.props.loadAnim){
                    this.animate()
                }
                break
            case LoadMoreState.state.hide:
                this.arr.forEach((item) => {
                    this.animatedValue[item].stopAnimation(value => {
                        // console.log('剩余时间' + (1 - value) * 200);
                    });
                })
                break
            case LoadMoreState.state.noMore:
                setTimeout(() => {
                    if(this.isMount){
                        this.setState({
                            curState: LoadMoreState.state.hide
                        })
                    }
                }, 3000)
                break

        }
    }

    /**
     * 根据状态返回绘制文字
     * @returns {string}
     */
    renderLoadText() {
        switch (this.state.curState) {
            case LoadMoreState.state.loading:
                if (this.props.loadAnim){
                    return LoadMoreState.stateText.loading
                }else{
                    return LoadMoreState.stateText.loading + '...'
                }

            case LoadMoreState.state.noMore:
                return LoadMoreState.stateText.noMore
            case LoadMoreState.state.tip:
                return LoadMoreState.stateText.tip
            case LoadMoreState.state.error:
                return LoadMoreState.stateText.error
        }
    }

    // 绘制文字
    renderLoad() {
        const animations = this.arr.map((value, index) => {
            return (
                <Animated.Text key={index} style={{
                    opacity: this.animatedValue[value], fontSize: Config.screenW * 0.06, color: Config.normalTextColor
                }}>.</Animated.Text>
            )
        })
        return (
            <TouchableOpacity
                style={{flexDirection: 'row', alignItems: 'center', height: Config.screenW * 0.14,}}
                onPress={() => new DoubleClick().filterDoubleClick(
                    function () {
                        if (this.state.curState === LoadMoreState.state.error){
                            this.props.onRetry && this.props.onRetry()
                            this.setState({
                                curState:LoadMoreState.state.loading
                            })
                            this.animate()
                        }
                    }.bind(this)
                )}>
                <Text style={{
                    color: Config.normalTextColor,
                    fontSize: Config.screenW * 0.04,
                    marginRight: Config.screenW * 0.02,
                }}>
                    {this.renderLoadText()}
                </Text>
                {/*是加载状态绘制。。。的动画*/}
                {this.state.curState === LoadMoreState.state.loading ?
                    <View style={styles.pointsView}>
                        {animations}
                    </View> : null}

            </TouchableOpacity>
        )
    }
}

LoadMore.propTypes = {
    state: PropTypes.number, //当前状态
    onRetry: PropTypes.func ,//重试回调
    loadAnim: PropTypes.bool, //是否显示加载动画，flatlist尾部组件不支持
}
LoadMore.defaultProps = {
    state: LoadMoreState.state.hide, //默认不显示
    loadAnim: false //默认不用动画
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    pointsView: {
        height: Config.screenW * 0.14,
        flexDirection: 'row',
        alignItems: 'center',
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
})

export default LoadMore;

对flatlist封装

封装flatlist实现下拉刷新和加载更多

与scrollview的封装方式大致相同，render方法需要稍做修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

render() {
     return (
         <View style={[Refresh.styles.wrap, this.props.style]} onLayout={this.onLayout}>
             <Animated.View style={[this.state.pullPan.getLayout()]}>
                 {/*绘制下拉刷新view*/}
                 {this.renderTopRefresh()}
                 {/*绘制里面的子view*/}
                 <View ref={(c) => {
                     this.scrollContainer = c
                 }} {...this.panResponder.panHandlers} style={{width: this.state.width, height: this.state.height}}>
                     <FlatList
                         ref={(c) => {
                             this.list = c
                         }}
                         extraData={this.state}
                         {...this.props}
                         onScroll={this.onScroll}
                         scrollEnabled={this.state.scrollEnabled}
                         ListFooterComponent={() => {
                             return <LoadMore state={this.props.loadMoreState} onRetry={() => this.props.onRetry()}/>
                         }}
                     />

                 </View>
             </Animated.View>
         </View>
     )
 }

在业务代码中使用

1
2
3
4
5
6
7
8
9
10
11
12

<PullFlatList
        data={this.state.data.data}
        showsVerticalScrollIndicator={false}
        ItemSeparatorComponent={this.space}
        renderItem={({item, index}) => (
            <ComicImg imgUrl={item} index={index}/>
        )}
        keyExtractor={item => item}
        numColumns={1}
        onPullRelease={this.props.onRefresh}
        style={[CommonStyle.styles.listView,{width: Config.screenW,height:Config.screenH}]}
    />

对应的源码地址:

组件封装
组件使用

随着混合开发越来越火，逐渐成为行业发展趋势，ReactNative也一直保持着快速更新的节奏，”learn once,write anywhere”这个宣传语一直吸引着我，公司最近也不忙了，一直想入坑的我终于找到了一个合适的时间点，很长一段时间没有更新博客了，因为在学习ReactNative这个框架，由于喜欢one一个的ui界面，做了这个开源项目，这是一个高仿韩寒one一个的开源项目，在此声明，本项目完全以学习为目的，不侵犯one一个的利益，遵守开源协议，所有接口全部来源于one一个android版4.3.4抓包获得，项目中使用的素材也是解压apk文件获得，不打算支持登录后的评论, 分享, 点赞操作, 原版是使用android原生实现的，本项目用ReactNative框架实现，还使用了ReactNative的第三方库，sdk接入是调用了原生android sdk模块，此项目目前只对android进行了适配，ios目前尚未适配，项目结构并非标准的ReactNative项目结构，而是android原生项目结构引入ReactNative框架的混合开发结构。我学习ReactNative不久，以前是做android原生开发的，如果有写的不好的地方，或者是你有更好的实现方式，希望一起学习讨论。

先上目前的效果图：

如何运行

确保你的编译设备和运行设备在同一网络下,并且配置开发设置中的主机ip和端口号(Dev settings -> Debug server host & port for device)

1. 在命令行输入, react-native start
2. 选择你的运行设备, run app

api接口清单

这里对提取出的api接口做个记录，本人以学习为目的，希望读者也不要用于任何商业项目中，目前列出的接口是基于4.3.4的android版：

1. one首页（第一页，date=0，更多页date=yyyy-MM-dd）

   http://v3.wufazhuce.com:8000/api/channel/one/{date}/0

2. 专题列表（第一页，last_id=0，更多页last_id=上次请求结束的id）

   http://v3.wufazhuce.com:8000/api/banner/list/4?last_id={last_id}

3. 横着的列表（所有人问所有人）

   http://v3.wufazhuce.com:8000/api/banner/list/5

4. 近期热门作者

   http://v3.wufazhuce.com:8000/api/author/hot

5. one首页菜单跳转

   • 问答
     http://v3.wufazhuce.com:8000/api/comment/praiseandtime/question/{content_id}
http://v3.wufazhuce.com:8000/api/question/htmlcontent/{content_id}

   • 连载
     http://v3.wufazhuce.com:8000/api/comment/praiseandtime/serial/{content_id}/0
http://v3.wufazhuce.com:8000/api/serialcontent/htmlcontent/{content_id}

   • 音乐
     http://v3.wufazhuce.com:8000/api/music/htmlcontent/{content_id}
http://v3.wufazhuce.com:8000/api/comment/praiseandtime/music/{content_id}/0

   • 电影
     http://v3.wufazhuce.com:8000/api/comment/praiseandtime/movie/{content_id}/0
http://v3.wufazhuce.com:8000/api/movie/htmlcontent/{content_id}

   • 文章内容和作者
     http://v3.wufazhuce.com:8000/api/essay/htmlcontent/{content_id}
     文章评论
     http://v3.wufazhuce.com:8000/api/comment/praiseandtime/essay/{content_id}/0

6. 搜索模块分类跳转（category_id，0图文 3问答 1阅读 2连载 5影视 4音乐 8电台）

   http://v3.wufazhuce.com:8000/api/all/list/{category_id}

7. one首页和专题列表的item点击阅读跳转详情和获取评论

   • 问答
     http://v3.wufazhuce.com:8000/api/question/htmlcontent/{content_id}
http://v3.wufazhuce.com:8000/api/comment/praiseandtime/question/{content_id}

   • 连载
     http://v3.wufazhuce.com:8000/api/serialcontent/htmlcontent/{content_id}
http://v3.wufazhuce.com:8000/api/comment/praiseandtime/serial/{content_id}/0

   • 音乐
     http://v3.wufazhuce.com:8000/api/music/htmlcontent/{content_id}
http://v3.wufazhuce.com:8000/api/comment/praiseandtime/music/{content_id}/0

   • 电影
     http://v3.wufazhuce.com:8000/api/movie/htmlcontent/{content_id}
http://v3.wufazhuce.com:8000/api/comment/praiseandtime/movie/{content_id}/0

   • 文章内容和作者
     http://v3.wufazhuce.com:8000/api/essay/htmlcontent/{content_id}

   • 文章评论
     http://v3.wufazhuce.com:8000/api/comment/praiseandtime/essay/{content_id}/0

   • 电台
     http://v3.wufazhuce.com:8000/api/radio/htmlcontent/{content_id}
http://v3.wufazhuce.com:8000/api/comment/praiseandtime/radio/{content_id}/0

   • 专题
     http://v3.wufazhuce.com:8000/api/topic/htmlcontent/{content_id}
http://v3.wufazhuce.com:8000/api/comment/praiseandtime/topic/{content_id}/0

8. 作者页
   http://v3.wufazhuce.com:8000/api/author/works?page_num={page_num}&author_id={author_id}&version=4.3.4

功能模块：

根据android 4.3.4整理：

一级界面：

欢迎界面，按星期几展示不同的欢迎界面

one分页，也是首页，展示今日列表（插图，one-story, 问答，文章，影视，音乐，电台），折叠菜单，可翻页查看以前的列表，每翻一页，查看前一天的内容，列表头部可以下拉刷新。

all分页，长列表展示，顶部banner，分类导航，专题列表（下拉到底部以后，可加载更多），列表头部可以下拉刷新。

me分页，个人资料页，未登录时，为登录界面入口和设置入口

二级界面：

设置界面

阅读界面

登录界面

分享界面

搜索界面

第三方平台分享，登录sdk对接

当前未完成部分：

阅读界面js回调（包含音乐播放）夜间模式

设置模块缓存

阅读界面交互动画

目前用到的技术：

由于我最初学习的时候资料是用ES5进行编写的，这是我自学ReactNative后的第一个项目，所以本项目ES5和ES6混用，我知道这样不是很好，有时间了会全部使用ES6

react-native对原生组件进行了封装。

1. 基本控件的使用 View，Text，Image，ScrollView，ListView，WebView，Clipboard，Platform，TouchableOpacity，ActivityIndicator，StatusBar，SliderBar。
2. 动画的调用，Animated，Easing
3. 计时器的使用，react-timer-mixin 改为ES6语法，该模块移除
4. react-native调用原生模块（原生toast，调android第三方分享sdk）
5. 底部导航栏TabNavigator，页面导航Navigator
6. 子组件的封装，调用以及回调
7. 父组件和子组件之间的参数传递
8. 页面导航跳转时的参数传递，以及回调
9. 下拉刷新，第三方react-native控件的引入( react-native-pull )，并进行部分修改
10. 自定义折叠控件（one分页中的菜单）实现折叠动画
11. 自定义banner控件，实现all分页中的广告栏展示
12. 自定义加载更多控件，监听ScrollView的滑动，实现加载更多
13. 自定义阅读界面loading时的帧动画展示
14. 半透明界面，悬浮窗实现，自定义单选对话框实现
15. 相册，拍照实现，react-native第三方库接入
16. 调用基于Android原生封装的ui控件
17. 在Android原生项目的基础上引入react-native框架进行混合开发
18. 音乐专辑封面旋转动画（解决动画循环播放中的暂停与播放事件），通过直接修改属性setNativeProps实现帧动画提高性能
19. 加入mobx实现多界面同时刷新（2018.5.2更新）
20. 利用高阶组件封装base组件，实现组件的公共逻辑（2018.5.2更新）
21. 实现one分页标题(日期数字)切换动画 (2018.6.28更新)

这个项目让初学者的我受益良多，现在的react-native第三方框架还不是很多，很多时候要自定义，而且在Android上的坑还是有很多，不过react-native的更新速度也是相当快的。后面有时间会陆续追加一些此项目中自定义部分的详细技术文章。
最近由于公司的项目需求，入坑了微信小程序，年前忙项目进度，估计短期内没有时间更新这个项目了，有时间会上传目前的动画效果图。

此项目的github地址传送门，欢迎一起交流和学习。

RxJava 的异步实现，是通过一种扩展的观察者模式来实现的。免除了业务逻辑代码的频繁回调，增加了逻辑代码的可读性。

观察者模式：

A 对象（观察者）对 B 对象（被观察者）的某种变化高度敏感，需要在 B 变化的一瞬间做出反应。
观察者不需要时刻盯着被观察者（例如 A 不需要每过 2ms 就检查一次 B 的状态），而是采用注册(Register)或者称为订阅(Subscribe)的方式

• 观察者接口定义

  1 2 3

  public interface Observer { void update(Object value); }

• 观察者实现

  1 2 3 4 5 6 7 8 9 10 11 12 13 14

  public class User implements Observer{ private String name; private String message; public User(String name){ this,name = name; } public void update(Object value){ this.message = (String) value; readMessage(); } private void readMessage(){ System.out.println(name + "收到推送消息" + message); } }

• 被观察者接口定义

  1 2 3 4 5 6

  public interface Observable{ void addObserver(Observer observer); void removeObserver(Observer observer); void notifyObservers(); void pushMessage(String message); }

• 被观察者实现

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

  public class WechatServerObservable implements Observable{ private List<Observer> observers = new ArrayList<>(); // 缓存多个观察者 private String message; public void addObserver(Observer observer){ observers.add(observer); } public void removeObserver(Observer observer){ observers.remove(observer); } public void notifyObservers(){ for (Observer observer : observers) { observer.update(message); } } public void pushMessage(String message){ this,message = message; notifyObservers(); System.out.println(name + "发送推送消息" + message); } }

• 使用

  1 2 3 4 5 6 7 8 9

  //创建一个被观察者，微信服务 Observable observable =new WeChatServerObservable(); //创建多个观察者，用户 Observer user1 =new UserPerson("小方"); Observer user2 =new UserPerson("小明"); observable.addObserver(user1); observable.addObserver(user2); //推送消息 observable.pushMessage("开始抢票！");

  RxJava 基本概念：

  Observable (可观察者，即被观察者)也称作上游
  Observer (观察者)也称作下游
  subscribe (订阅)、事件
  Observable 和 Observer 通过 subscribe() 方法实现订阅关系，从而 Observable 可以在需要的时候发出事件来通知 Observer。

与传统观察者模式不同， RxJava 的事件回调方法除了普通事件 onNext() （相当于 onClick() / onEvent()）之外，还定义了两个特殊的事件：onCompleted() 和 onError()。

onCompleted(): 事件队列完结。RxJava 不仅把每个事件单独处理，还会把它们看做一个队列。RxJava 规定，当不会再有新的 onNext() 发出时，需要触发 onCompleted() 方法作为标志。
onError(): 事件队列异常。在事件处理过程中出异常时，onError() 会被触发，同时队列自动终止，不允许再有事件发出。
在一个正确运行的事件序列中, onCompleted() 和 onError() 有且只有一个，并且是事件序列中的最后一个。需要注意的是，onCompleted() 和 onError() 二者也是互斥的，即在队列中调用了其中一个，就不应该再调用另一个。

对于Android本身有一套现成的框架，复杂的逻辑操作在服务端较多，客户端出现的场景较少，长时间不怎么使用，很容易让人忘记那些理论知识，所以根据一些实战例子来进行学习效果更佳。

map操作符

常用于数据列表类型转换
上游读取数据源并发送到下游，Utils.getApiUserList()模拟从服务端获得的dto类型为ApiUser的数据列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

private Observable<List<ApiUser>> getObservable() {
    return Observable.create(new ObservableOnSubscribe<List<ApiUser>>() {
        @Override
        public void subscribe(ObservableEmitter<List<ApiUser>> e) throws Exception {
            //上游未被切断
            if (!e.isDisposed()) {
                //发送到下游,执行下游对应逻辑
                e.onNext(Utils.getApiUserList());
                //上游发送完毕，执行下游对应逻辑
                e.onComplete();
            }
        }
    });
}


public static List<ApiUser> getApiUserList() {

    List<ApiUser> apiUserList = new ArrayList<>();

    ApiUser apiUserOne = new ApiUser();
    apiUserOne.firstname = "Amit";
    apiUserOne.lastname = "Shekhar";
    apiUserList.add(apiUserOne);

    ApiUser apiUserTwo = new ApiUser();
    apiUserTwo.firstname = "Manish";
    apiUserTwo.lastname = "Kumar";
    apiUserList.add(apiUserTwo);

    ApiUser apiUserThree = new ApiUser();
    apiUserThree.firstname = "Sumit";
    apiUserThree.lastname = "Kumar";
    apiUserList.add(apiUserThree);

    return apiUserList;
}

建立订阅关系，通过map操作符将ApiUser类型的dto转化成User类型的dto，再执行下游的处理逻辑：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

    //上游处理逻辑
    getObservable()
            .map(new Function<List<ApiUser>, List<User>>() {
                @Override
                public List<User> apply(List<ApiUser> apiUsers) throws Exception {
                //转化操作
                    return Utils.convertApiUserListToUserList(apiUsers);
                }
            })
            // 在子线程中运行
            .subscribeOn(Schedulers.io())
            // 切换到主线程
            .observeOn(AndroidSchedulers.mainThread())
            // 下游处理逻辑
            .subscribe(getObserver());

 public static List<User> convertApiUserListToUserList(List<ApiUser> apiUserList) {

    List<User> userList = new ArrayList<>();

    for (ApiUser apiUser : apiUserList) {
        User user = new User();
        user.firstname = apiUser.firstname;
        user.lastname = apiUser.lastname;
        userList.add(user);
    }

    return userList;
}

下游获取到数据源，进行数据打印：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

private Observer<List<User>> getObserver() {
       return new Observer<List<User>>() {

           @Override
           public void onSubscribe(Disposable d) {
               Log.d(TAG, " onSubscribe : " + d.isDisposed());
           }

           @Override
           public void onNext(List<User> userList) {
               textView.append(" onNext");
               textView.append(AppConstant.LINE_SEPARATOR);
               for (User user : userList) {
                   textView.append(" firstname : " + user.firstname);
                   textView.append(AppConstant.LINE_SEPARATOR);
               }
               Log.d(TAG, " onNext : " + userList.size());
           }

           @Override
           public void onError(Throwable e) {
               textView.append(" onError : " + e.getMessage());
               textView.append(AppConstant.LINE_SEPARATOR);
               Log.d(TAG, " onError : " + e.getMessage());
           }

           @Override
           public void onComplete() {
               textView.append(" onComplete");
               textView.append(AppConstant.LINE_SEPARATOR);
               Log.d(TAG, " onComplete");
           }
       };
   }

flatMap操作符

常用于遍历数据列表，按条件进行过滤
与它相同的是concatMap，但是flatMap可能会乱序，concatMap可保证下游的获取到的数据源与上游发送顺序一致
此处上游数据源与map操作符相同

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

getObservable()
               .subscribeOn(Schedulers.io())
               .observeOn(AndroidSchedulers.mainThread())
               .flatMap(new Function<List<ApiUser>, ObservableSource<ApiUser>>() {
                   @Override
                   public ObservableSource<ApiUser> apply(List<ApiUser> apiUsers) throws Exception {
                       return Observable.fromIterable(apiUsers);
                   }
               })
               .filter(new Predicate<ApiUser>() {
                   @Override
                   public boolean test(ApiUser apiUser) throws Exception {
                       return apiUser.lastname.substring(0,1).equals("K");
                   }
               })
               .subscribe(getObserver());

下游获取到数据源，进行数据打印：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

private Observer<ApiUser> getObserver(){
       return new Observer<ApiUser>() {
           @Override
           public void onSubscribe(Disposable d) {

           }

           @Override
           public void onNext(ApiUser apiUser) {
               Log.d(TAG, "user : " + apiUser.toString());
           }

           @Override
           public void onError(Throwable e) {

           }

           @Override
           public void onComplete() {

           }
       };
   }

zip操作符

常用于对两个数据源列表进行处理，并返回一个结果数据列表
上游读取两个数据源并发送到下游：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

private Observable<List<User>> getCricketFansObservable() {
      return Observable.create(new ObservableOnSubscribe<List<User>>() {
          @Override
          public void subscribe(ObservableEmitter<List<User>> e) throws Exception {
              //上游未被切断
              if (!e.isDisposed()) {
                  //发送到下游,执行下游对应逻辑
                  e.onNext(Utils.getUserListWhoLovesCricket());
                  //上游发送完毕，执行下游对应逻辑
                  e.onComplete();
              }
          }
      });
  }

  private Observable<List<User>> getFootballFansObservable() {
      return Observable.create(new ObservableOnSubscribe<List<User>>() {
          @Override
          public void subscribe(ObservableEmitter<List<User>> e) throws Exception {
              //上游未被切断
              if (!e.isDisposed()) {
                  //发送到下游,执行下游对应逻辑
                  e.onNext(Utils.getUserListWhoLovesFootball());
                  //上游发送完毕，执行下游对应逻辑
                  e.onComplete();
              }
          }
      });
  }
  
  //模拟数据源1
   public static List<User> getUserListWhoLovesCricket() {

      List<User> userList = new ArrayList<>();

      User userOne = new User();
      userOne.id = 1;
      userOne.firstname = "Amit";
      userOne.lastname = "Shekhar";
      userList.add(userOne);

      User userTwo = new User();
      userTwo.id = 2;
      userTwo.firstname = "Manish";
      userTwo.lastname = "Kumar";
      userList.add(userTwo);

      return userList;
  }

  //模拟数据源2
  public static List<User> getUserListWhoLovesFootball() {

      List<User> userList = new ArrayList<>();

      User userOne = new User();
      userOne.id = 1;
      userOne.firstname = "Amit";
      userOne.lastname = "Shekhar";
      userList.add(userOne);

      User userTwo = new User();
      userTwo.id = 3;
      userTwo.firstname = "Sumit";
      userTwo.lastname = "Kumar";
      userList.add(userTwo);

      return userList;
  }

建立订阅关系，通过zip操作符过滤两个数据源都有的数据，返回结果数据列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

Observable.zip(getCricketFansObservable(), getFootballFansObservable(),
                new BiFunction<List<User>, List<User>, List<User>>() {
                    @Override
                    public List<User> apply(List<User> cricketFans, List<User> footballFans) throws Exception {
                        //过滤两个数据表都有的数据，返回结果数据列表
                        return Utils.filterUserWhoLovesBoth(cricketFans, footballFans);
                    }
                })
                // 在子线程中运行
                .subscribeOn(Schedulers.io())
                // 切到主线程
                .observeOn(AndroidSchedulers.mainThread())
                // 下游逻辑处理
                .subscribe(getObserver());
                
        public static List<User> filterUserWhoLovesBoth(List<User> cricketFans, List<User> footballFans) {
        List<User> userWhoLovesBoth = new ArrayList<User>();
        for (User cricketFan : cricketFans) {
            for (User footballFan : footballFans) {
                if (cricketFan.id == footballFan.id) {
                    userWhoLovesBoth.add(cricketFan);
                }
            }
        }
        return userWhoLovesBoth;
    }

下游获取到数据源进行数据打印

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

private Observer<List<User>> getObserver() {
    return new Observer<List<User>>() {

        @Override
        public void onSubscribe(Disposable d) {
            Log.d(TAG, " onSubscribe : " + d.isDisposed());
        }

        @Override
        public void onNext(List<User> userList) {
            textView.append(" onNext");
            textView.append(AppConstant.LINE_SEPARATOR);
            for (User user : userList) {
                textView.append(" firstname : " + user.firstname);
                textView.append(AppConstant.LINE_SEPARATOR);
            }
            Log.d(TAG, " onNext : " + userList.size());
        }

        @Override
        public void onError(Throwable e) {
            textView.append(" onError : " + e.getMessage());
            textView.append(AppConstant.LINE_SEPARATOR);
            Log.d(TAG, " onError : " + e.getMessage());
        }

        @Override
        public void onComplete() {
            textView.append(" onComplete");
            textView.append(AppConstant.LINE_SEPARATOR);
            Log.d(TAG, " onComplete");
        }
    };
}

Interval操作符

常用于周期性的处理逻辑（每隔多少时间后执行）
上游11秒延迟后，每隔2秒，发送long型数据源到下游，从0开始逐渐递增

1
2
3

private Observable<? extends Long> getObservable() {
       return Observable.interval(11, 2, TimeUnit.SECONDS);
   }

建立订阅关系，CompositeDisposable统一存放水管，也就是被观察者，为防止内存泄漏，在activity被destory时切断所有的水管

1
2
3
4
5
6
7
8
9
10
11
12
13

CompositeDisposable disposables = new CompositeDisposable();
 disposables.add(getObservable()
                // 上游运行在子线程
                .subscribeOn(Schedulers.io())
                // 切换到主线程
                .observeOn(AndroidSchedulers.mainThread())
                // 下游逻辑处理
                .subscribeWith(getObserver()));
 @Override
    protected void onDestroy() {
        super.onDestroy();
        disposables.clear();
    }

下游获取到数据源进行数据打印：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

private DisposableObserver<Long> getObserver() {
        return new DisposableObserver<Long>() {

            @Override
            public void onNext(Long value) {
                textView.append(" onNext : value : " + value);
                textView.append(AppConstant.LINE_SEPARATOR);
                Log.d(TAG, " onNext : value : " + value);
            }

            @Override
            public void onError(Throwable e) {
                textView.append(" onError : " + e.getMessage());
                textView.append(AppConstant.LINE_SEPARATOR);
                Log.d(TAG, " onError : " + e.getMessage());
            }

            @Override
            public void onComplete() {
                textView.append(" onComplete");
                textView.append(AppConstant.LINE_SEPARATOR);
                Log.d(TAG, " onComplete");
            }
        };
    }

Timer操作符

常用于计时器的处理逻辑（多少时间后执行）
上游延迟2秒发送long型数据0到下游，只发送一次

1
2
3

private Observable<? extends Long> getObservable() {
    return Observable.timer(2, TimeUnit.SECONDS);
}

建立订阅关系

1
2
3
4
5
6

getObservable()
             // 上游在子线程运行
             .subscribeOn(Schedulers.io())
             // 切换到主线程
             .observeOn(AndroidSchedulers.mainThread())
             .subscribe(getObserver());

下游进行打印输出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

private Observer<Long> getObserver() {
       return new Observer<Long>() {

           @Override
           public void onSubscribe(Disposable d) {
               Log.d(TAG, " onSubscribe : " + d.isDisposed());
           }

           @Override
           public void onNext(Long value) {
               textView.append(" onNext : value : " + value);
               textView.append(AppConstant.LINE_SEPARATOR);
               Log.d(TAG, " onNext : value : " + value);
           }

           @Override
           public void onError(Throwable e) {
               textView.append(" onError : " + e.getMessage());
               textView.append(AppConstant.LINE_SEPARATOR);
               Log.d(TAG, " onError : " + e.getMessage());
           }

           @Override
           public void onComplete() {
               textView.append(" onComplete");
               textView.append(AppConstant.LINE_SEPARATOR);
               Log.d(TAG, " onComplete");
           }
       };
   }

Flowable背压式

Rxjava在处理异步操作时，会先将上游的数据放入一个缓存池中，这里称作水缸，一旦下游不能及时处理就会出现内存溢出的问题，抛出MissingBackpressureException
解决方式

1. 放慢上游的发送速度
2. 减少发送的数据
   Flowable在设计的时候采用了一种新的思路也就是响应式拉取的方式来更好的解决上下游流速不均衡的问题，
   在同一线程中下游没有调用request, 上游就认为下游没有处理事件的能力，抛出MissingBackpressureException，当上下游工作在不同的线程中时, 只有当下游调用request时, 才从水缸里取出事件发给下游。

   背压策略

   BackpressureStrategy.ERROR：

   默认策略，有一个大小为128的水缸

   BackpressureStrategy.BUFFER

   增大水缸的容量，仍有内存溢出问题

   BackpressureStrategy.DROP

   水缸存不下时，直接把存不下的事件丢弃

   BackpressureStrategy.LATEST

   水缸存不下时，只保留最新的事件

   reduce操作符

   遍历list，第一次将第一个元素和第二个元素作为入参，返回一个结果值，以后将上一次返回的结果和当前遍历的元素作为入参，返回一个结果值。
   与它相同的是scan操作符，但是scan操作符会返回上一次的结果
   上游创建数据源，发送到下游

   1 2 3

   private Observable<Integer> getObservable() { return Observable.just(1, 2, 3, 4); }

   建立订阅关系，将上一次返回的结果和当前遍历的元素作为入参，最后返回一个累加值

   1 2 3 4 5 6 7 8

   getObservable() .reduce(new BiFunction<Integer, Integer, Integer>() { @Override public Integer apply(Integer t1, Integer t2) { return t1 + t2; } }) .subscribe(getObserver());

   下游进行打印输出

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

   private MaybeObserver<Integer> getObserver() { return new MaybeObserver<Integer>() { @Override public void onSubscribe(Disposable d) { Log.d(TAG, " onSubscribe : " + d.isDisposed()); } @Override public void onSuccess(Integer value) { textView.append(" onSuccess : value : " + value); textView.append(AppConstant.LINE_SEPARATOR); Log.d(TAG, " onSuccess : value : " + value); } @Override public void onError(Throwable e) { textView.append(" onError : " + e.getMessage()); textView.append(AppConstant.LINE_SEPARATOR); Log.d(TAG, " onError : " + e.getMessage()); } @Override public void onComplete() { textView.append(" onComplete"); textView.append(AppConstant.LINE_SEPARATOR); Log.d(TAG, " onComplete"); } }; }

   Filter操作符

   遍历list中的每个元素，按条件过滤

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

   Observable.just(1, 2, 3, 4, 5, 6) .filter(new Predicate<Integer>() { @Override public boolean test(Integer integer) throws Exception { return integer % 2 == 0; } }) .subscribe(getObserver()); private Observer<Integer> getObserver() { return new Observer<Integer>() { @Override public void onSubscribe(Disposable d) { Log.d(TAG, " onSubscribe : " + d.isDisposed()); } @Override public void onNext(Integer value) { textView.append(" onNext : "); textView.append(AppConstant.LINE_SEPARATOR); textView.append(" value : " + value); textView.append(AppConstant.LINE_SEPARATOR); Log.d(TAG, " onNext "); Log.d(TAG, " value : " + value); } @Override public void onError(Throwable e) { textView.append(" onError : " + e.getMessage()); textView.append(AppConstant.LINE_SEPARATOR); Log.d(TAG, " onError : " + e.getMessage()); } @Override public void onComplete() { textView.append(" onComplete"); textView.append(AppConstant.LINE_SEPARATOR); Log.d(TAG, " onComplete"); } }; }

   Contact操作符

   将多个数据源结合成一个数据源并发送数据，并且严格按照先后顺序发射数据
   与它相同的有merge，但是merge是无序的且是并发的

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

   String[] aStrings = {"A1", "A2", "A3", "A4"}; String[] bStrings = {"B1", "B2", "B3"}; Observable<String> aObservable = Observable.fromArray(aStrings); Observable<String> bObservable = Observable.fromArray(bStrings); Observable.concat(aObservable, bObservable) .subscribe(getObserver()); private Observer<String> getObserver() { return new Observer<String>() { @Override public void onSubscribe(Disposable d) { Log.d(TAG, " onSubscribe : " + d.isDisposed()); } @Override public void onNext(String value) { textView.append(" onNext : value : " + value); textView.append(AppConstant.LINE_SEPARATOR); Log.d(TAG, " onNext : value : " + value); } @Override public void onError(Throwable e) { textView.append(" onError : " + e.getMessage()); textView.append(AppConstant.LINE_SEPARATOR); Log.d(TAG, " onError : " + e.getMessage()); } @Override public void onComplete() { textView.append(" onComplete"); textView.append(AppConstant.LINE_SEPARATOR); Log.d(TAG, " onComplete"); } }; }

   Rxbus的使用

   定义Rxbus

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

   public class RxBus { public RxBus() { } private PublishSubject<Object> bus = PublishSubject.create(); //发送event public void send(Object o) { bus.onNext(o); } //获取bus对象 public Observable<Object> toObservable() { return bus; } public boolean hasObservers() { return bus.hasObservers(); } }

   在Application中初始化Rxbus，做事件的统一管理

   1 2 3 4 5 6 7 8 9 10 11 12

   public class MyApplication extends Application { private RxBus bus; @Override public void onCreate() { super.onCreate(); bus = new RxBus(); } public RxBus bus() { return bus; } }

   在activity中发送事件，CompositeDisposable统一存放水管，为避免内存泄漏，destory时切断水管

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

   CompositeDisposable disposables = new CompositeDisposable(); @Override protected void onDestroy() { super.onDestroy(); disposables.clear(); } //上游是MyApplication的bus，建立订阅关系，绑定下游事件接收回调处理 disposables.add(((MyApplication) getApplication()) .bus() .toObservable() .subscribeOn(Schedulers.io()) .observeOn(AndroidSchedulers.mainThread()) .subscribe(new Consumer<Object>() { @Override public void accept(Object object) throws Exception { if (object instanceof Events.TapEvent) { textView.setText("Tap Event Received"); } } })); //发送事件到MyApplication的bus ((MyApplication) getApplication()) .bus() .send(new Events.TapEvent());

   操作符组合使用

   android搜索功能的实现
   绑定searchview的监听

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

   public class RxSearchObservable { public static Observable<String> fromView(SearchView searchView) { final PublishSubject<String> subject = PublishSubject.create(); searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() { @Override public boolean onQueryTextSubmit(String s) { subject.onComplete(); return true; } @Override public boolean onQueryTextChange(String text) { subject.onNext(text); return true; } }); return subject; } }

   建立订阅关系，上游输入文字监听，下游显示结果

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

   //上游绑定SearchView输入文字监听 RxSearchObservable.fromView(searchView) //每隔300毫秒执行 .debounce(300, TimeUnit.MILLISECONDS) //过滤输入文字不为空 .filter(new Predicate<String>() { @Override public boolean test(String text) throws Exception { if (text.isEmpty()) { textViewResult.setText(""); return false; } else { return true; } } }) //与上次的数据对比有变化 .distinctUntilChanged() //只发射最近的一次observable .switchMap(new Function<String, ObservableSource<String>>() { @Override public ObservableSource<String> apply(String query) throws Exception { //从网络获取数据 return dataFromNetwork(query); } }) //在子线程中运行 .subscribeOn(Schedulers.io()) //切到主线程 .observeOn(AndroidSchedulers.mainThread()) //下游显示结果 .subscribe(new Consumer<String>() { @Override public void accept(String result) throws Exception { textViewResult.setText(result); } }); //模拟网络请求 private Observable<String> dataFromNetwork(final String query) { return Observable.just(true) .delay(2, TimeUnit.SECONDS) .map(new Function<Boolean, String>() { @Override public String apply(@NonNull Boolean value) throws Exception { return query; } }); }

   封装线程切换

   1 2 3 4 5 6 7 8 9 10 11 12 13

   private final static <UD> ObservableTransformer <UD, UD> rxud(){ return new ObservableTransformer<UD,UD>(){ public ObservableSource<UD> apply (Observable<UD> upstream){ return upstream.subscribeOn(Schedulers,io()) .observableOn(AndroidSchedulers.mainThread()); } } } Observable.from(getObservable()) .map(data -> dealwith(data)) .compose(rxud()) .subscribe(getObserver());

   切子线程切主线程再切子线程切主线程

   doOnNext 替代subscribeOn连接两次请求之间的切换

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

   api.registerAction() .subscribeOn(Schedulers.io()) .observableOn(AndroidSchedulers.mainThread()) .doOnNext(new Consumer<RegisterResponse>(){ public void accept(RegisterResponse registerResponse) throws Exception { } }) .observableOn(Schedulers.io()) .flatMap(new Function<RegisterResponse, ObservableSource<LoginResponse>>(){ public ObservableSource<LoginResponse> apply(RegisterResponse registerResponse){ Observable<LoginResponse> loginResponse = api.loginAction(); return loginResponse; } }) .observableOn(AndroidSchedulers.mainThread()) .subscribe(new Observable<LoginResponse>{ })

   封装RXView

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78

   public class RxView{ private final static String TAG = RxView.class.getSimpleName(); public static Observable<Object> clicks(View view){ return new ViewClickObservable(view); } } public class ViewClickObservable extends Observable<Object> { private final View view; private static final Object EVENT = new Object(); private static Object EVENT2; public ViewClickObservable(View view){ this.view = view; EVENT2 = view; } protected void subscribeActual(Observer<? super Object> observer){ MyListener myListener = new MyListener(view, observer); observer.onSubscribe(myListener) this.view.setOnClickListener(myListener) } static final class MyListener implements View.OnClickListener, Disposable{ private final View view; private Observer<Object> observer; private final AtomicBoolean isDisposable = new AtomicBoolean(); // 是否中断 public MyListener(View view, Observer<Object> observer){ this.view = view; this.observer = observer; } public void onClick(View v){ // 继续分发 if (isDisposed() == false){ observer.onNext(EVENT); } } public void dispose(){ // 之前没有中断，设置为中断 if (isDisposable.compareAndSet(false, true)){ // 主线程取消监听逻辑 if (Looper.myLoop() == Looper.getMainLooper()){ view.setOnClickListener(null) }else { AndroidSchedulers.mainThread().schedulerDirect(new Runnable()){ public void run(){ view.setOnClickListener(null) } } } } } public boolean isDisposed(){ return isDisposable; } } } RxView.clicks(button) .throttleFirst(2000, TimeUnit.MILLISECONDS) .subscribe(new Consumer<Object>(){ public void accept(Object o) throws Exception { Observable.create(new ObservableOnSubscribe<String>(){ public void subscribe(ObservableEmitter<String> e) throws Exception{ e.onNext("click"); } }) } }) .subscribe(new Consumer<String>(){ public void accept(String s) throws Exception { Log.d("RxView","accept:" + s) } })