fix ScrollView

flyskywhy · May 13, 2016 · b364c3a · b364c3a
1 parent 8a66411
commit b364c3a
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 1 deletion.
diff --git a/Libraries/ScrollView/ScrollView.web.js b/Libraries/ScrollView/ScrollView.web.js
@@ -19,6 +19,7 @@ import autobind from 'autobind-decorator';
 
 const SCROLLVIEW = 'ScrollView';
 const INNERVIEW = 'InnerScrollView';
+const CONTENT_EXT_STYLE = ['padding', 'paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'];
 
 /**
  * Component that wraps platform ScrollView while providing
@@ -319,10 +320,24 @@ class ScrollView extends React.Component {
   }
 
   render() {
+    let {
+      style,
+      ...otherProps
+    } = this.props;
+
+    let contentContainerExtStyle = {};
+
+    for (let i = 0; i < CONTENT_EXT_STYLE.length; i++) {
+      if (typeof style[CONTENT_EXT_STYLE[i]] === 'number') {
+        contentContainerExtStyle[CONTENT_EXT_STYLE[i]] = style[CONTENT_EXT_STYLE[i]];
+      }
+    }
+
     let contentContainerStyle = [
       styles.contentContainer,
       this.props.horizontal && styles.contentContainerHorizontal,
       this.props.contentContainerStyle,
+      contentContainerExtStyle,
     ];
     // if (__DEV__ && this.props.style) {
     //   let style = flattenStyle(this.props.style);
@@ -360,7 +375,7 @@ class ScrollView extends React.Component {
     }
 
     let props = {
-      ...this.props,
+      ...otherProps,
       alwaysBounceHorizontal,
       alwaysBounceVertical,
       style: ([styles.base, this.props.style]: ?Array<any>),
@@ -400,6 +415,7 @@ let styles = StyleSheet.create({
     flex: 1,
   },
   contentContainer: {
+    position: 'absolute',
     minWidth: '100%',
   },
   contentContainerHorizontal: {

diff --git a/Libraries/StyleSheet/setDefaultStyle.web.js b/Libraries/StyleSheet/setDefaultStyle.web.js
@@ -45,6 +45,9 @@ function appendSytle({
     bottom: 0;
     overflow: hidden;
   }
+  .${rootClassName} > .${viewClassName} {
+    height: 100%;
+  }
   .${rootClassName} .${viewClassName} {
     position: relative;
     ${boxStyle}

diff --git a/README-zh.md b/README-zh.md
@@ -148,6 +148,12 @@ var Platform = require('ReactPlatform');
     LayoutAnimation.configureNext(...)
   }
   ```
+5. ScrollView 需要指定高度
+  ```js
+  <ScrollView style={{height: 235}} horizontal={true}> // 手动指定滚动区域高度、子元素不会自动撑起ScrollView
+    <View />
+  </ScrollView>
+  ```
 
 ## 任务脚本
 

diff --git a/README.md b/README.md
@@ -153,6 +153,11 @@ As mentioned above, the HasteResolverPlugin plugin will help webpack to compile
   }
   ```
 
+5. Should manually specify the height of ScrollView
+  ```js
+  <ScrollView style={{height: 235}} horizontal={true} />
+  ```
+
 ### React Native compatible
 
 #### Components