ソースを参照

[RN] Avoid rendering Container if not visible

This solves the issue of view clipping on Android, plus it seems to be the RN
convention unless the views are very large and memory hungry.
j8
Saúl Ibarra Corretgé 9年前
コミット
023359b9d2
1個のファイルの変更2行の追加26行の削除
  1. 2
    26
      react/features/base/react/components/Container.native.js

+ 2
- 26
react/features/base/react/components/Container.native.js ファイルの表示

@@ -1,6 +1,5 @@
1 1
 import React from 'react';
2 2
 import {
3
-    Dimensions,
4 3
     TouchableHighlight,
5 4
     TouchableWithoutFeedback,
6 5
     View
@@ -19,7 +18,7 @@ export class Container extends AbstractContainer {
19 18
      *
20 19
      * @static
21 20
      */
22
-    static propTypes = AbstractContainer.propTypes
21
+    static propTypes = AbstractContainer.propTypes;
23 22
 
24 23
     /**
25 24
      * Implements React's {@link Component#render()}.
@@ -32,23 +31,8 @@ export class Container extends AbstractContainer {
32 31
         let { onClick, style, touchFeedback, visible, ...props } = this.props;
33 32
 
34 33
         // visible
35
-
36
-        // The following property is responsible to hide/show this Container by
37
-        // moving it out of site of the screen boundaries. An attempt to use the
38
-        // opacity property was made in order to eventually implement a
39
-        // fadeIn/fadeOut animation, however a known React Native problem was
40
-        // discovered, which allows the view to still capture touch events even
41
-        // if hidden.
42
-        // TODO Alternatives will be investigated.
43
-        let parentStyle;
44
-
45 34
         if (typeof visible !== 'undefined' && !visible) {
46
-            const windowDimensions = Dimensions.get('window');
47
-
48
-            parentStyle = {
49
-                bottom: -windowDimensions.height,
50
-                right: -windowDimensions.width
51
-            };
35
+            return null;
52 36
         }
53 37
 
54 38
         // onClick & touchFeedback
@@ -56,13 +40,6 @@ export class Container extends AbstractContainer {
56 40
 
57 41
         const renderParent = touchFeedback || onClick;
58 42
 
59
-        if (!renderParent && parentStyle) {
60
-            style = {
61
-                ...style,
62
-                ...parentStyle
63
-            };
64
-        }
65
-
66 43
         // eslint-disable-next-line object-property-newline
67 44
         let component = this._render(View, { ...props, style });
68 45
 
@@ -72,7 +49,6 @@ export class Container extends AbstractContainer {
72 49
             const parentProps = {};
73 50
 
74 51
             onClick && (parentProps.onPress = onClick);
75
-            parentStyle && (parentProps.style = parentStyle);
76 52
 
77 53
             component = React.createElement(parentType, parentProps, component);
78 54
         }

読み込み中…
キャンセル
保存