React Native Modal元件 Android覆蓋狀態列

Undo_03發表於2019-03-04
React Native元件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實現全屏

相關文章