瀏覽代碼

[RN] Simplify styles which fill the parent view

Turns out React Native offers an object with the following definition:

{
    bottom: 0,
    left: 0,
    position: 'absolute',
    right: 0,
    top: 0
}
master
Saúl Ibarra Corretgé 7 年之前
父節點
當前提交
bbb1dce42a

+ 5
- 11
react/features/base/dialog/components/styles.js 查看文件

1
+import { StyleSheet } from 'react-native';
2
+
1
 import { ColorPalette, createStyleSheet } from '../../styles';
3
 import { ColorPalette, createStyleSheet } from '../../styles';
2
 
4
 
3
 /**
5
 /**
32
      * view instead, so the modal animation doesn't affect the backdrop.
34
      * view instead, so the modal animation doesn't affect the backdrop.
33
      */
35
      */
34
     backdrop: {
36
     backdrop: {
35
-        bottom: 0,
36
-        left: 0,
37
-        position: 'absolute',
38
-        right: 0,
39
-        top: 0
37
+        ...StyleSheet.absoluteFillObject
40
     },
38
     },
41
 
39
 
42
     /**
40
     /**
53
      * Style for an overlay on top of which the sheet will be displayed.
51
      * Style for an overlay on top of which the sheet will be displayed.
54
      */
52
      */
55
     overlay: {
53
     overlay: {
56
-        backgroundColor: 'rgba(0, 0, 0, 0.8)',
57
-        bottom: 0,
58
-        left: 0,
59
-        position: 'absolute',
60
-        right: 0,
61
-        top: 0
54
+        ...StyleSheet.absoluteFillObject,
55
+        backgroundColor: 'rgba(0, 0, 0, 0.8)'
62
     },
56
     },
63
 
57
 
64
     /**
58
     /**

+ 4
- 6
react/features/base/jwt/components/styles.native.js 查看文件

1
+import { StyleSheet } from 'react-native';
2
+
1
 import { ColorPalette, createStyleSheet } from '../../styles';
3
 import { ColorPalette, createStyleSheet } from '../../styles';
2
 
4
 
3
 export default createStyleSheet({
5
 export default createStyleSheet({
8
      * The style of {@code CalleeInfo}.
10
      * The style of {@code CalleeInfo}.
9
      */
11
      */
10
     ringing: {
12
     ringing: {
13
+        ...StyleSheet.absoluteFillObject,
11
         alignItems: 'center',
14
         alignItems: 'center',
12
         backgroundColor: ColorPalette.black,
15
         backgroundColor: ColorPalette.black,
13
-        bottom: 0,
14
         flex: 0,
16
         flex: 0,
15
         flexDirection: 'column',
17
         flexDirection: 'column',
16
         justifyContent: 'center',
18
         justifyContent: 'center',
17
-        left: 0,
18
-        opacity: 0.8,
19
-        position: 'absolute',
20
-        right: 0,
21
-        top: 0
19
+        opacity: 0.8
22
     },
20
     },
23
 
21
 
24
     'ringing__avatar': {
22
     'ringing__avatar': {

+ 2
- 6
react/features/base/media/components/native/styles.js 查看文件

35
      * and create a fade-in effect.
35
      * and create a fade-in effect.
36
      */
36
      */
37
     videoCover: {
37
     videoCover: {
38
-        backgroundColor: ColorPalette.black,
39
-        bottom: 0,
40
-        left: 0,
41
-        position: 'absolute',
42
-        right: 0,
43
-        top: 0
38
+        ...StyleSheet.absoluteFillObject,
39
+        backgroundColor: ColorPalette.black
44
     }
40
     }
45
 });
41
 });

+ 3
- 7
react/features/base/react/components/native/TintedView.js 查看文件

1
 // @flow
1
 // @flow
2
 
2
 
3
 import React, { Component } from 'react';
3
 import React, { Component } from 'react';
4
-import { View } from 'react-native';
4
+import { StyleSheet, View } from 'react-native';
5
 
5
 
6
 import { ColorPalette } from '../../../styles';
6
 import { ColorPalette } from '../../../styles';
7
 
7
 
9
  * Base style for the {@code TintedView} component.
9
  * Base style for the {@code TintedView} component.
10
  */
10
  */
11
 const BASE_STYLE = {
11
 const BASE_STYLE = {
12
+    ...StyleSheet.absoluteFillObject,
12
     alignItems: 'center',
13
     alignItems: 'center',
13
-    bottom: 0,
14
-    justifyContent: 'center',
15
-    left: 0,
16
-    position: 'absolute',
17
-    right: 0,
18
-    top: 0
14
+    justifyContent: 'center'
19
 };
15
 };
20
 
16
 
21
 /**
17
 /**

+ 4
- 6
react/features/base/react/components/native/styles.js 查看文件

1
+import { StyleSheet } from 'react-native';
2
+
1
 import {
3
 import {
2
     BoxModel,
4
     BoxModel,
3
     ColorPalette,
5
     ColorPalette,
47
      * The top-level element of a page.
49
      * The top-level element of a page.
48
      */
50
      */
49
     page: {
51
     page: {
52
+        ...StyleSheet.absoluteFillObject,
50
         alignItems: 'stretch',
53
         alignItems: 'stretch',
51
-        bottom: 0,
52
         flex: 1,
54
         flex: 1,
53
         flexDirection: 'column',
55
         flexDirection: 'column',
54
-        left: 0,
55
-        overflow: 'hidden',
56
-        position: 'absolute',
57
-        right: 0,
58
-        top: 0
56
+        overflow: 'hidden'
59
     },
57
     },
60
 
58
 
61
     /**
59
     /**

+ 4
- 6
react/features/large-video/components/styles.js 查看文件

1
+import { StyleSheet } from 'react-native';
2
+
1
 import { ColorPalette, createStyleSheet } from '../../base/styles';
3
 import { ColorPalette, createStyleSheet } from '../../base/styles';
2
 
4
 
3
 /**
5
 /**
10
      * Large video container style.
12
      * Large video container style.
11
      */
13
      */
12
     largeVideo: {
14
     largeVideo: {
15
+        ...StyleSheet.absoluteFillObject,
13
         alignItems: 'stretch',
16
         alignItems: 'stretch',
14
         backgroundColor: ColorPalette.appBackground,
17
         backgroundColor: ColorPalette.appBackground,
15
-        bottom: 0,
16
         flex: 1,
18
         flex: 1,
17
-        justifyContent: 'center',
18
-        left: 0,
19
-        position: 'absolute',
20
-        right: 0,
21
-        top: 0
19
+        justifyContent: 'center'
22
     }
20
     }
23
 });
21
 });

+ 7
- 15
react/features/overlay/components/styles.js 查看文件

1
+import { StyleSheet } from 'react-native';
2
+
1
 import { BoxModel, ColorPalette, createStyleSheet } from '../../base/styles';
3
 import { BoxModel, ColorPalette, createStyleSheet } from '../../base/styles';
2
 
4
 
3
 /**
5
 /**
14
      * rendered.
16
      * rendered.
15
      */
17
      */
16
     container: {
18
     container: {
17
-        backgroundColor: ColorPalette.red,
18
-        bottom: 0,
19
-        left: 0,
20
-        position: 'absolute',
21
-        right: 0,
22
-        top: 0
19
+        ...StyleSheet.absoluteFillObject,
20
+        backgroundColor: ColorPalette.red
23
     }
21
     }
24
 });
22
 });
25
 
23
 
52
      */
50
      */
53
     container: {
51
     container: {
54
         flex: 1,
52
         flex: 1,
55
-        marginBottom: BoxModel.margin,
56
-        marginHorizontal: BoxModel.margin,
57
-        marginTop: BoxModel.margin * 3
53
+        margin: BoxModel.margin * 2
58
     },
54
     },
59
 
55
 
60
     /**
56
     /**
61
      * Style for the {@code LoadingIndicator}.
57
      * Style for the {@code LoadingIndicator}.
62
      */
58
      */
63
     loadingIndicator: {
59
     loadingIndicator: {
60
+        ...StyleSheet.absoluteFillObject,
64
         alignItems: 'center',
61
         alignItems: 'center',
65
-        bottom: 0,
66
-        justifyContent: 'center',
67
-        left: 0,
68
-        position: 'absolute',
69
-        right: 0,
70
-        top: 0
62
+        justifyContent: 'center'
71
     },
63
     },
72
 
64
 
73
     /**
65
     /**

+ 2
- 5
react/features/toolbox/components/native/styles.js 查看文件

1
 // @flow
1
 // @flow
2
+import { StyleSheet } from 'react-native';
2
 
3
 
3
 import { BoxModel, ColorPalette, createStyleSheet } from '../../../base/styles';
4
 import { BoxModel, ColorPalette, createStyleSheet } from '../../../base/styles';
4
 
5
 
98
      * of the screen.
99
      * of the screen.
99
      */
100
      */
100
     toolboxWide: {
101
     toolboxWide: {
101
-        bottom: 0,
102
-        left: 0,
103
-        position: 'absolute',
104
-        right: 0,
105
-        top: 0
102
+        ...StyleSheet.absoluteFillObject
106
     },
103
     },
107
 
104
 
108
     /**
105
     /**

Loading…
取消
儲存