react-native的全面屏处理

react-native的全面屏处理

iOS

以iPhoneX为例,顶部导航栏和底部导航栏有一个“安全”区域,怎么去处理?RN官方提供SafeAreaView的组件目的是在一个“安全”的可视区域内渲染内容。对SafeAreaView进行封装处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
/** 
* topColor 顶部颜色
*/
import React, {Component,} from 'react';
import {DeviceInfo, SafeAreaView, StyleSheet, View, ViewPropTypes} from 'react-native';
import {PropTypes} from 'prop-types';

export default class SafeAreaViewPlus extends Component {
static propTypes = {
...ViewPropTypes,
topColor: PropTypes.string,
bottomColor: PropTypes.string,
enablePlus: PropTypes.bool,
topInset: PropTypes.bool,
bottomInset: PropTypes.bool,

};
static defaultProps = {
topColor: 'transparent',
bottomColor: '#f8f8f8',
enablePlus: true,
topInset: true,
bottomInset: false,
};

genSafeAreaViewPlus() {
const {children, topColor, bottomColor, topInset, bottomInset} = this.props;
return <View style={[styles.container, this.props.style]}>
{this.getTopArea(topColor, topInset)}
{children}
{this.getBottomArea(bottomColor, bottomInset)}
</View>;
}

genSafeAreaView() {
return <SafeAreaView style={[styles.container, this.props.style]} {...this.props}>
{this.props.children}
</SafeAreaView>
}

getTopArea(topColor, topInset) {
return !DeviceInfo.isIPhoneX_deprecated || !topInset ? null
: <View style={[styles.topArea, {backgroundColor: topColor}]}/>;
}

getBottomArea(bottomColor, bottomInset) {
return !DeviceInfo.isIPhoneX_deprecated || !bottomInset ? null
: <View style={[styles.bottomArea, {backgroundColor: bottomColor}]}/>;
}

render() {
const {enablePlus} = this.props;
return enablePlus ? this.genSafeAreaViewPlus() : this.genSafeAreaView();
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
topArea: {
height: 44,
},
bottomArea: {
height: 34,
}
});

Android

改变屏幕最大适应比例

1
2
3
4
5
6
7
AndroidManifest.xml

<!--适配全面屏-->
android:resizeableActivity="true"
<meta-data
android:name="android.max_aspect"
android:value="2.2" />