ScrollView 源码解析

ScrollView 源码解析

ScrollView的源码位置位于 node_modules/react-native\Libraries\Components\ScrollView\ScrollView.js 我在 ScrollView 目录下惊喜的发现了：

//scrollview.png

我似乎看到了 RecycleView 身影。

由于 ScrollView 的源码比较长，而且比较复杂，所以这里就不把完整的代码贴出来了，这里先把关注点放在 render() 函数里面，render里面 return 语句如下：

if (refreshControl) {
  if (Platform.OS === 'ios') {
    // On iOS the RefreshControl is a child of the ScrollView.
    return (
      <ScrollViewClass {...props} ref={this._setScrollViewRef}>
        {refreshControl}
        {contentContainer}
      </ScrollViewClass>
    );
  } else if (Platform.OS === 'android') {
    // On Android wrap the ScrollView with a AndroidSwipeRefreshLayout.
    // Since the ScrollView is wrapped add the style props to the
    // AndroidSwipeRefreshLayout and use flex: 1 for the ScrollView.
    return React.cloneElement(
      refreshControl,
      {style: props.style},
      <ScrollViewClass {...props} style={baseStyle} ref={this._setScrollViewRef}>
        {contentContainer}
      </ScrollViewClass>
    );
  }
}
return (
  <ScrollViewClass {...props} ref={this._setScrollViewRef}>
    {contentContainer}
  </ScrollViewClass>
);

第一行 if 语句里面根据是否为 ScrollView 指定了 RefreshControl 刷新控件，如果有则会生成，如果没有设置，则生成的控件只包含 contentContainer。这里出现了我们不熟悉的 Component ScrollViewClass，其实这个是 ScrollView 的具体实现类。我们往上翻一翻就可以看到这个 ScrollViewClass 的身影：

let ScrollViewClass;
if (Platform.OS === 'ios') {
  ScrollViewClass = RCTScrollView;
} else if (Platform.OS === 'android') {
  if (this.props.horizontal) {
    ScrollViewClass = AndroidHorizontalScrollView;
  } else {
    ScrollViewClass = AndroidScrollView;
  }
}

上面的代码根据不同的操作系统平台，分别将不同的 Component 赋予 ScrollViewClass 变量，这里可以看到，ios 用的是 RCTScrollView这个类，android 上根据 主轴(horizontal属性 true或者false)方向是水平或者垂直，来使用不同的两个 Component 控件，具体的实现类是由下面的代码决定的（这里只展示一种）

  AndroidScrollView = requireNativeComponent('RCTScrollView', ScrollView, nativeOnlyProps);

RCTScrollView 是原生 android 代码封装了 原生 ScrollView 控件的一个组件类，能在react natives android 相关源码上看到相关的实现（由于这里将某个组件类注册为RCTScrollView，在 android 上具体的类名不一定是这个，实际上其对应的类名是 ReactScrollView）我们这里暂且不管，总之需要知道，RCTScrollView 对应的是一个封装的好的android 原生 ScrollView 就好了，我们回到之前的代码。看下这行代码：

  <ScrollViewClass {...props} ref={this._setScrollViewRef}> //这里标签未闭合只是为了说明语法

这里将 ScrollView 的属性，通过 jsx 语法 “…props”全部传递到 ScrollViewClass 里面去了，然后通过 ref 指向自己。接着我们看到这样两行代码：

        {refreshControl}
        {contentContainer}

在 React 的语法中，碰到{}就解析为 javascript 表达式，所以这里两个 javascript 表达式，前者是生成了 refreshControl 下拉刷新控件，后者是 contentContainer 表示的是一个 ScrollView Item 的内容，具体可看下面的代码：

// 定义了一个 const 常量，不可变常量(ES6语法),把一个 View 赋值给了这个常量
const contentContainer =
  <View
    {...contentSizeChangeProps}
    ref={this._setInnerViewRef}
    style={contentContainerStyle}
    removeClippedSubviews={this.props.removeClippedSubviews}
    collapsable={false}>
    {this.props.children}
  </View>;

上面的代码基本就是设置了一堆属性，我们先跳过，我们看到这里似乎还不知道，一个 ScrollView 怎么添加一个 Item 的把，这似乎不太对呀！！直观的，应该有类似的 add()方法之类的或者需要滑动事件的处理之类的。由于JS源码可读性比较差，反正我是找不到类似的信息，所以这会我们便跑去看看呗（你可以直接使用 AS 查看源码，在Project 视图下 去到 External Libaries目录下找到react-native源码包或者你可以解压Jar直接看）

源码路径 com.facebook.react.views.scroll.ReactScrollView