瀏覽代碼

Fix ScrollView not scrollable in Overlay (#4561)

Fixes an issue with ScrollView inside an Overlay. While down events were propagated to the view, move events were consumed by the overlay preventing scroll components from functioning correctly.
Guy Carmeli 5 年之前
父節點
當前提交
d3ab1ac526
No account linked to committer's email address

+ 2
- 4
lib/android/app/src/main/java/com/reactnativenavigation/views/touch/OverlayTouchDelegate.java 查看文件

@@ -42,11 +42,9 @@ public class OverlayTouchDelegate {
42 42
         TouchLocation location = getTouchLocation(event);
43 43
         if (location == TouchLocation.Inside) {
44 44
             reactView.dispatchTouchEventToJs(event);
45
+            return false;
45 46
         }
46
-        if (interceptTouchOutside.isTrue()) {
47
-            return location == TouchLocation.Inside;
48
-        }
49
-        return location == TouchLocation.Outside;
47
+        return interceptTouchOutside.isFalseOrUndefined();
50 48
     }
51 49
 
52 50
     private TouchLocation getTouchLocation(MotionEvent ev) {

+ 3
- 0
playground/src/app.js 查看文件

@@ -11,6 +11,9 @@ if (Platform.OS === 'android') {
11 11
           title
12 12
         },
13 13
         options: {
14
+          layout: {
15
+            componentBackgroundColor: 'transparent'
16
+          },
14 17
           overlay: {
15 18
             interceptTouchOutside: true
16 19
           }

+ 17
- 0
playground/src/screens/ComplexLayout.js 查看文件

@@ -14,6 +14,7 @@ class ComplexLayout extends Component {
14 14
         <Button title={'External component in stack'} testID={testIDs.EXTERNAL_COMPONENT_IN_STACK} onPress={this.onExternalComponentInStackPressed} />
15 15
         <Button title={'External component in deep stack'} testID={testIDs.EXTERNAL_COMPONENT_IN_DEEP_STACK} onPress={this.onExternalComponentInDeepStackPressed} />
16 16
         <Button title={'SideMenu layout inside a bottomTab'} testID={testIDs.SIDE_MENU_LAYOUT_INSIDE_BOTTOM_TAB} onPress={this.onSideMenuLayoutInsideBottomTabPressed} />
17
+        <Button title='Show touch through overlay with scroll' testID={testIDs.SHOW_TOUCH_THROUGH_OVERLAY_SCROLLER} onPress={() => this.onClickShowOverlayWithScroll(true)} />
17 18
       </View>
18 19
     );
19 20
   }
@@ -151,6 +152,22 @@ class ComplexLayout extends Component {
151 152
       }
152 153
     });
153 154
   }
155
+
156
+  onClickShowOverlayWithScroll = async (interceptTouchOutside) => {
157
+    await Navigation.showOverlay({
158
+      component: {
159
+        name: 'navigation.playground.CustomDialogWithScroll',
160
+        options: {
161
+          layout: {
162
+            componentBackgroundColor: 'transparent'
163
+          },
164
+          overlay: {
165
+            interceptTouchOutside
166
+          }
167
+        }
168
+      }
169
+    });
170
+  }
154 171
 }
155 172
 
156 173
 module.exports = ComplexLayout;

+ 4
- 16
playground/src/screens/OptionsScreen.js 查看文件

@@ -133,7 +133,6 @@ class OptionsScreen extends Component {
133 133
         <Button title='Custom Transition' testID={testIDs.CUSTOM_TRANSITION_BUTTON} onPress={this.onClickCustomTransition} />
134 134
         {Platform.OS === 'android' && <Button title='Hide fab' testID={testIDs.HIDE_FAB} onPress={this.onClickFab} />}
135 135
         <Button title='Show overlay' testID={testIDs.SHOW_OVERLAY_BUTTON} onPress={() => this.onClickShowOverlay(true)} />
136
-        <Button title='Show touch through overlay with scroll' testID={testIDs.SHOW_TOUCH_THROUGH_OVERLAY_SCROLLER} onPress={() => this.onClickShowOverlayWithScroll(true)} />
137 136
         <Button title='Show touch through overlay' testID={testIDs.SHOW_TOUCH_THROUGH_OVERLAY_BUTTON} onPress={() => this.onClickShowOverlay(false)} />
138 137
         <Button title='Push Default Options Screen' testID={testIDs.PUSH_DEFAULT_OPTIONS_BUTTON} onPress={this.onClickPushDefaultOptionsScreen} />
139 138
         <Button title='Show TopBar react view' testID={testIDs.SHOW_TOPBAR_REACT_VIEW} onPress={this.onShowTopBarReactView} />
@@ -270,28 +269,17 @@ class OptionsScreen extends Component {
270 269
       component: {
271 270
         name: 'navigation.playground.CustomDialog',
272 271
         options: {
272
+          layout: {
273
+            componentBackgroundColor: 'transparent'
274
+          },
273 275
           overlay: {
274
-            interceptTouchOutside
275
-          }
276
-        }
277
-      }
278
-    });
279
-  }
280
-
281
-  onClickShowOverlayWithScroll = async (interceptTouchOutside) => {
282
-    await Navigation.showOverlay({
283
-      component: {
284
-        name: 'navigation.playground.CustomDialogWithScroll',
285
-        options: {
286
-          overlay: {
287
-            interceptTouchOutside
276
+            interceptTouchOutside: false
288 277
           }
289 278
         }
290 279
       }
291 280
     });
292 281
   }
293 282
 
294
-
295 283
   onClickPushDefaultOptionsScreen = () => {
296 284
     Navigation.setDefaultOptions({
297 285
       topBar: {

+ 54
- 54
playground/src/screens/complexlayouts/CustomDialogWithScroll.js 查看文件

@@ -1,69 +1,69 @@
1 1
 const React = require('react');
2 2
 const { PureComponent } = require('react');
3 3
 
4
-const { Text, Button, View, Alert, Platform ,ScrollView} = require('react-native');
4
+const { Text, Button, View, Alert, Platform, ScrollView, StyleSheet } = require('react-native');
5 5
 const { Navigation } = require('react-native-navigation');
6 6
 
7 7
 const testIDs = require('../../testIDs');
8 8
 
9 9
 class CustomDialogWithScroll extends PureComponent {
10
-    static options() {
11
-        return {
12
-            statusBarBackgroundColor: 'green'
13
-        };
14
-    }
10
+  static options() {
11
+    return {
12
+      statusBarBackgroundColor: 'green'
13
+    };
14
+  }
15 15
 
16
-    render() {
17
-        return (
18
-            <View style={styles.container}>
19
-                <ScrollView style={styles.root}>
20
-                    <View style={{height: 60, backgroundColor: 'red'}}/>
21
-                    <View style={{height: 60, backgroundColor: 'green'}}/>
22
-                    <View style={{height: 60, backgroundColor: 'red'}}/>
23
-                    <View style={{height: 60, backgroundColor: 'green'}}/>
24
-                    <View style={{height: 60, backgroundColor: 'red'}}/>
25
-                    <View style={{height: 60, backgroundColor: 'green'}}/>
26
-                </ScrollView>
27
-            </View>
28
-        );
29
-    }
16
+  render() {
17
+    return (
18
+      <View style={styles.root}>
19
+        <View style={{ height: 200, width: '80%', alignSelf: 'center', flexDirection: 'row' }}>
20
+          <ScrollView style={styles.scrollView} contentContainerStyle={styles.content}>
21
+            <View style={{ height: 60, backgroundColor: 'red' }} />
22
+            <View style={{ height: 60, backgroundColor: 'green' }} />
23
+            <View style={{ height: 60, backgroundColor: 'red' }} />
24
+            <View style={{ height: 60, backgroundColor: 'green' }} />
25
+            <View style={{ height: 60, backgroundColor: 'red' }} />
26
+            <View style={{ height: 60, backgroundColor: 'green' }} />
27
+          </ScrollView>
28
+        </View>
29
+      </View>
30
+    );
31
+  }
30 32
 
31
-    didDisappear() {
32
-        if (Platform.OS === 'android') {
33
-            Alert.alert('Overlay disappeared');
34
-        }
33
+  didDisappear() {
34
+    if (Platform.OS === 'android') {
35
+      Alert.alert('Overlay disappeared');
35 36
     }
37
+  }
36 38
 }
37 39
 
38
-const styles = {
39
-    root: {
40
-        width: 400,
41
-        height: 200,
42
-    },
43
-    container: {
44
-
45
-        width: 400,
46
-        height: 200,
47
-        flexDirection: 'column',
48
-        justifyContent: 'center',
49
-        alignItems: 'center',
50
-        alignSelf: 'center'
51
-    },
52
-    h1: {
53
-        fontSize: 24,
54
-        textAlign: 'center',
55
-        margin: 10
56
-    },
57
-    h2: {
58
-        fontSize: 12,
59
-        textAlign: 'center',
60
-        margin: 10
61
-    },
62
-    footer: {
63
-        fontSize: 10,
64
-        color: '#888',
65
-        marginTop: 10
66
-    }
67
-};
40
+const styles = StyleSheet.create({
41
+  scrollView: {
42
+    backgroundColor: 'blue'
43
+  },
44
+  root: {
45
+    flex: 1,
46
+    flexDirection: 'column',
47
+    justifyContent: 'flex-end'
48
+  },
49
+  content: {
50
+    backgroundColor: 'blue'
51
+  },
52
+  h1: {
53
+    fontSize: 24,
54
+    textAlign: 'center',
55
+    margin: 10
56
+  },
57
+  h2: {
58
+    fontSize: 12,
59
+    textAlign: 'center',
60
+    margin: 10
61
+  },
62
+  footer: {
63
+    fontSize: 10,
64
+    color: '#888',
65
+    marginTop: 10
66
+  }
67
+});
68 68
 
69 69
 module.exports = CustomDialogWithScroll;