react-native ScrollView的style属性中设置gap对于子组件不生效

本文链接：https://blog.youkuaiyun.com/xiangjiu99/article/details/143899133

原因：ScrollView会被解析成两层的嵌套容器，结构如下。

里层的children就是子组件，所以要对子组件设置gap应该修改contentContainerStyle属性。

<NativeDirectionalScrollView {...props} ref={scrollViewRef}>
  <NativeDirectionalScrollContentView style={contentContainerStyle}>
    {children}
  </NativeDirectionalScrollContentView>
</NativeDirectionalScrollView>

外层的NativeDirectionalScrollView在安卓纵向滚动视图被映射为RCTScrollView，里层NativeDirectionalScrollContentView在安卓纵向滚动视图被映射为View。其他映射关系详见源码。

const {NativeHorizontalScrollViewTuple, NativeVerticalScrollViewTuple} =
  Platform.OS === 'android'
    ? {
        NativeHorizontalScrollViewTuple: [
          AndroidHorizontalScrollViewNativeComponent,
          AndroidHorizontalScrollContentViewNativeComponent,
        ],
        NativeVerticalScrollViewTuple: [ScrollViewNativeComponent, View],
      }
    : {
        NativeHorizontalScrollViewTuple: [
          ScrollViewNativeComponent,
          ScrollContentViewNativeComponent,
        ],
        NativeVerticalScrollViewTuple: [
          ScrollViewNativeComponent,
          ScrollContentViewNativeComponent,
        ],
      };