fix(taro-components-rn): view 绑定 clickable 时不再套一层 view 以避免样式拆分导致的样式错误，f…

…ix #2205
NervJS · Feb 19, 2019 · 01f069c · 01f069c
1 parent 0d795a6
commit 01f069c
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 1 deletion.
diff --git a/packages/taro-components-rn/App.js b/packages/taro-components-rn/App.js
@@ -103,6 +103,15 @@ export default class App extends Component {
 
         <EXAudio />
 
+        <View style={{ flexDirection: 'row', flexWrap: 'wrap', width: '100%', height: 200 }}>
+          <View style={{ width: '33.33%', height: 100, backgroundColor: 'red' }}></View>
+          <View style={{ width: '33.33%', height: 100, backgroundColor: 'green' }}></View>
+          <View style={{ width: '33.33%', height: 100, backgroundColor: 'red' }}></View>
+          <View style={{ width: '33.33%', height: 100, backgroundColor: 'green' }}></View>
+          <View style={{ width: '33.33%', height: 100, backgroundColor: 'red' }}></View>
+          <View style={{ width: '33.33%', height: 100, backgroundColor: 'green' }}></View>
+        </View>
+
         <View
           hoverStyle={{ backgroundColor: 'green' }}
           style={{ padding: 50, backgroundColor: 'orange' }}

diff --git a/packages/taro-components-rn/src/components/View/index.js b/packages/taro-components-rn/src/components/View/index.js
@@ -44,7 +44,10 @@ class _View extends React.Component<Props, State> {
     // const { hover } = this.state
 
     return (
-      <View style={style}>
+      <View
+        style={style}
+        {...this.props}
+      >
         {this.props.children}
       </View>
     )

diff --git a/packages/taro-components-rn/src/components/_Clickable/index.js b/packages/taro-components-rn/src/components/_Clickable/index.js
@@ -205,6 +205,27 @@ export default function (WrappedComponent: React.ComponentType<*>) {
         )
       }
 
+      if (WrappedComponent.name === '_View') {
+        return (
+          <WrappedComponent
+            {...omit(this.props, [
+              'style',
+              'hoverStyle',
+              'hoverStartTime',
+              'hoverStayTime',
+              'onClick',
+              'onLongPress',
+              'onTouchstart',
+              'onTouchmove',
+              'onTouchcancel',
+              'onTouchend'
+            ])}
+            {...this.panResponder.panHandlers}
+            style={[style, isHover && hoverStyle]}
+          />
+        )
+      }
+
       const dismember = dismemberStyle(style)
       const hoverStyleDismember = isHover ? dismemberStyle(hoverStyle) : {}