React Native Modal组件 Android覆盖状态栏

在App开发中常常须要作模态框，咱们第一时间就会想到 React Native 的 Modal 组件，确实Modal组件很方便。但也有一些不尽人意的地方，在安卓App开发的过程当中发现，Modal不会覆盖状态栏，就会致使Modal的背景色和状态栏的颜色不一致，即便是设置了沉浸式状态栏，这样破坏了App的总体性和美观。

Modal组件基本用法

属性介绍

• animationType: ['none', 'slide', 'fade'] Modal展现和收起时的动画效果
• onRequestClose: Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func 安卓物理返回回调，安卓必传
• onShow: func Modal组件展开完成时调用
• transparent: bool Modal背景色是否透明
• visible: bool 控制Modal的展开与收起

基本用法

class ModalDemo extends Component {

    state = {visible: false}
    
    close() {
        this.setState({visible: false})
    }

    render() {
        return (
            <View style={{flex: 1}}> <Modal animationType='slide' transparent visible={this.state.visible} onRequestClose={() => { this.close() }}> <Text>Modal Demo</Text> </Modal> <TouchableOpacity onPress={()=>{this.setState({visible: true})}}> <Text>show</Text> </TouchableOpacity> </View>
        )
    }
}

复制代码

简单实现Modal覆盖状态栏

其实实现很简单，在Modal组件外面包一层View，设置View绝对定位，宽高‘100%’，这样View会占据整个屏幕，再设置背景，Modal透明就能够了，这个View的渲染和Modal的visible属性用同一个state来控制便可。

{
    this.state.visible ?
        <View style={{position: 'absolute', width: '100%', height: '100%', backgroundColor: 'rgba(0,0,0,0.5)'}}> <Modal animationType='slide' transparent visible={this.state.visible} onRequestClose={() => { this.close() }}> <Text>Modal Demo</Text> </Modal> </View> : null
}
复制代码

这样只是实现了覆盖状态栏，还须要对各个View层的点击事件做处理，以致于达到与原始Modal组件相同的效果。

基于Modal封装覆盖状态栏的Modal

<TouchableOpacity activeOpacity={1} onPress={() => {this.close()}} style={{ position: 'absolute',width: '100%',zIndex: 999,height: '100%',backgroundColor: 'rgba(0, 0, 0, 0.5)'}}>
    <Modal
        animationType='slide'
        transparent
        visible={this.state.visible}
        onRequestClose={() => { this.close() }}>
        <TouchableOpacity onPress={() => {this.close()}} activeOpacity={1}>
            <TouchableWithoutFeedback onPress={() => {}}>
    				<Text>内容</Text>
            </TouchableWithoutFeedback>
        </TouchableOpacity>
    </Modal>
</TouchableOpacity>
复制代码

这是我在开发中使用的一种实现方式，原理简单，实现比较啰嗦。

固然也能够使用大神们的组件，也有大神从安卓底层作了封装

好比这个：react native modal android实现全屏