react-native的全面屏处理

Posted on | In

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" />