浏览代码

[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.
master
Saúl Ibarra Corretgé 8 年前
父节点
当前提交
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
 import React from 'react';
1
 import React from 'react';
2
 import {
2
 import {
3
-    Dimensions,
4
     TouchableHighlight,
3
     TouchableHighlight,
5
     TouchableWithoutFeedback,
4
     TouchableWithoutFeedback,
6
     View
5
     View
19
      *
18
      *
20
      * @static
19
      * @static
21
      */
20
      */
22
-    static propTypes = AbstractContainer.propTypes
21
+    static propTypes = AbstractContainer.propTypes;
23
 
22
 
24
     /**
23
     /**
25
      * Implements React's {@link Component#render()}.
24
      * Implements React's {@link Component#render()}.
32
         let { onClick, style, touchFeedback, visible, ...props } = this.props;
31
         let { onClick, style, touchFeedback, visible, ...props } = this.props;
33
 
32
 
34
         // visible
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
         if (typeof visible !== 'undefined' && !visible) {
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
         // onClick & touchFeedback
38
         // onClick & touchFeedback
56
 
40
 
57
         const renderParent = touchFeedback || onClick;
41
         const renderParent = touchFeedback || onClick;
58
 
42
 
59
-        if (!renderParent && parentStyle) {
60
-            style = {
61
-                ...style,
62
-                ...parentStyle
63
-            };
64
-        }
65
-
66
         // eslint-disable-next-line object-property-newline
43
         // eslint-disable-next-line object-property-newline
67
         let component = this._render(View, { ...props, style });
44
         let component = this._render(View, { ...props, style });
68
 
45
 
72
             const parentProps = {};
49
             const parentProps = {};
73
 
50
 
74
             onClick && (parentProps.onPress = onClick);
51
             onClick && (parentProps.onPress = onClick);
75
-            parentStyle && (parentProps.style = parentStyle);
76
 
52
 
77
             component = React.createElement(parentType, parentProps, component);
53
             component = React.createElement(parentType, parentProps, component);
78
         }
54
         }

正在加载...
取消
保存