我在react native 開發(fā)時颤陶≡忧睿基本每個頁面都要處理下面的問題烛卧。
1.為每個頁面包裹一層SafeArea用于適配iPhoneX以及后續(xù)機型
2.處理每一個頁面的安卓返回鍵
3.狀態(tài)欄的顏色等配置
移動端原生開發(fā)時予颤。我們會給每一個一面寫一個基類踢步。封裝一些配置和功能绞佩。后續(xù)的頁面都繼承這個基類寺鸥，起到便捷作用。所以我封裝了一個這樣的基類品山，用于快捷處理上面遇到的問題胆建。

import React, { Component } from "react";
import { StatusBar, StyleSheet, Platform } from "react-native";
import { SafeAreaView } from "react-navigation";
import { BackHandler } from "react-native";

export default class Base extends Component {
    constructor(props) {
        super(props);
        if (props.navigation) {
            //如果是在nav中的組件。添加安卓返回鍵監(jiān)聽
            this._didFocusSubscription = props.navigation.addListener(
                "didFocus",
                payload =>
                    BackHandler.addEventListener(
                        "hardwareBackPress",
                        this._onBackButtonPressAndroid
                    )
            );
        }
    }
    /**
     * 可以在繼承類中重寫的方法
     */
    //狀態(tài)欄配置文件
    _statusBarConfig = {};
    //處理安卓返回鍵肘交，默認直接可以返回笆载，子繼承類中重寫此方法可以自定義處理安卓返回鍵
    _onBackButtonPressAndroid = () => {
        //當return true時，會阻止默認的返回事件
        return false;
    };

    /**
     * LifeCircle
     * 在被繼承的Component中重寫這兩個方法作為新的生命周期使用
     * !!!!!一定要使用箭頭函數(shù)的形式
     * 不要重寫舊的componentDidMount和DidUnmount
     */

    BaseComponentWillMount = () => {};
    BaseRender = () => {};
    BaseComponentDidMount = () => {};
    BaseComponentWillUnmount = () => {};
    /**
     * 原有l(wèi)ifeCircle
     */

    componentDidMount = () => {
        if (this.props.navigation) {
            //添加狀態(tài)欄以及安卓返回鍵監(jiān)聽
            Platform.OS === "android" && this.setAndroidBackListener();
            this.setStatusBarListener();
        }
        this.BaseComponentDidMount();
    };
    UNSAFE_componentWillMount = () => {
        this.BaseComponentWillMount();
    };
    componentWillUnmount = () => {
        this._statusBarListener && this._statusBarListener.remove();
        this._didFocusSubscription && this._didFocusSubscription.remove();
        this._willBlurSubscription && this._willBlurSubscription.remove();
        this.BaseComponentWillUnmount();
    };

    //添加頁面切換時狀態(tài)欄監(jiān)聽
    setStatusBarListener = () => {
        const barConfig = {
            contentType: "dark-content", //狀態(tài)欄文字顏色 enum('default', 'light-content', 'dark-content')
            androidTranslucent: true, //狀態(tài)欄是否沉浸式涯呻。需要配合backgroundColor為透明色來一起配置
            androidBarBackgroundColor: null, //狀態(tài)欄背景顏色
            hidden: false, //是否隱藏狀態(tài)欄
            ...this._statusBarConfig
        };
        this._statusBarListener = this.props.navigation.addListener(
            "didFocus",
            () => {
                StatusBar.setBarStyle(barConfig.contentType);
                StatusBar.setHidden(barConfig.hidden);
                //安卓沉浸式
                if (Platform.OS === "android") {
                    StatusBar.setTranslucent(barConfig.androidTranslucent);
                    if (barConfig.androidTranslucent) {
                        //安卓沉浸式
                        StatusBar.setBackgroundColor("transparent");
                    } else {
                        barConfig.androidBarBackgroundColor &&
                            StatusBar.setBackgroundColor(barConfig.androidBarBackgroundColor);
                    }
                }
            }
        );
    };
    setAndroidBackListener = () => {
        this._willBlurSubscription = this.props.navigation.addListener(
            "willBlur",
            payload =>
                BackHandler.removeEventListener(
                    "hardwareBackPress",
                    this._onBackButtonPressAndroid
                )
        );
    };

    render = () => {
        return (
            <SafeAreaView
                style={[baseStyles.safeArea, this.safeAreaStyles]}
                forceInset={this.forceInset}
            >
                {this.BaseRender()}
            </SafeAreaView>
        );
    };
}

const baseStyles = StyleSheet.create({
    safeArea: {
        backgroundColor: '#ffffff',
        flex: 1
    }
});

然后在新建頁面時繼承這個類,新建的頁面如下

import React from "react";
import { View } from "src/Utility/PathExport";
import BaseComponent from "src/UI/Pages/BaseComponent";
import MainView from "./view";


/**
 * 新建頁面中用BaseComponentDidMount等代替原有的ComponentDidMount等生命周期凉驻，方法一定要寫成箭頭函數(shù)的形式，否則不識別
 */

//新建的類繼承于BaseComponent
export default  class index extends BaseComponent {
    static navigationOptions = {title:'Example'};
    //狀態(tài)欄配置复罐。BaseComponent會讀取,涉及到樣式配置全都寫在view.js里
    statusBarConfig = {
        contentType: "light-content",
        androidTranslucent: false,
        androidBarBackgroundColor: 'red', //狀態(tài)欄背景顏色
        hidden: false, //是否隱藏狀態(tài)欄
    };;

    _onBackButtonPressAndroid = () => {
        //當return true時涝登，會阻止默認的返回事件,false時則會響應
        alert("Back On Press");
        return true;
    };

    //新的生命周期寫法
    BaseComponentDidMount = () => {
    };
    BaseComponentWillUnmount = () => {};


    BaseRender = () => {
        return (
            <View style={{ flex: 1 }}>
              <MainView />
            </View>
        );
    };
}

這樣。我們就把上面的結(jié)構問題封裝到基類中了效诅。如果用別的常用配置也可以自己再添加在基類里缀拭。