《ReactNative系列講義》進階篇---03.Modal

| 版權聲明：本文爲博主原創文章，未經博主允許不得轉載。

一、簡介

項目開發中，總會遇到彈出窗，彈出窗的功能可能會是確認、單項選擇、多選、提示等等，一般情況下我們想要的效果通常是在當前頁面觸發事件，彈出遮罩層，並不會完全覆蓋掉當前頁面，當前頁面處於部分可見，而佈局的焦點處於遮罩層上，一般可見佈局位於中央部分，本篇博客帶大家制作一個單選框的Modal

二、思路整理

• 定義需要的屬性，定義屬性類型和默認值
• 繪製界面
• 調用組件

三、具體實現

創建ListViewModal.js文件，定義ListViewModal類

1. 添加組件

• name: prop-types
• homepage: https://www.npmjs.com/package/prop-types
• install:

npm install --save prop-types

• 組件說明: 該組件用來檢測傳遞給組件的屬性是否與定義的類型一致

2. 定義屬性

引入prop-types

import PropTypes from 'prop-types';

• 定義屬性類型
• note: class外部定義（即不可包含在ListViewModal類內部）
• note: 需展示的數據以數組的形式傳遞

ListViewModal.propTypes = {
    title: PropTypes.string // 標題
    ,modalVisible: PropTypes.bool // 顯示開關
    ,dataSource: PropTypes.array // 文本數據
    ,onConfirm: PropTypes.func.isRequired // 確認回調
    ,onCancel: PropTypes.func.isRequired // 取消回調
}

• 定義屬性默認值

ListViewModal.defaultProps = {
    title: '請選擇'
    ,dataSource: []
    ,modalVisible: false
}

3. 繪製界面

<Modal
 animationType={'slide'}
 transparent={true}
 visible={this.props.modalVisible}
 onRequestClose={() => {this.onCancel()}}>
     <View style={{flex:1, justifyContent:'center',alignItems:'center', backgroundColor:'rgba(0, 0, 0, 0.5)'}}>
         <View style={{ backgroundColor:'#fff', borderRadius: 10 ,height:350}}>
             <View style={{justifyContent:'center', alignItems:'center', borderBottomWidth:1, borderBottomColor:'#d5d5d5', height:35}}>
                 <Text style={{ fontSize:15,color:'#009AD6'}}>{this.props.title}</Text>
             </View>
             <ScrollView style={{marginTop:10}}>
                 {
                     this.props.dataSource.map((rowData) => {
                         return(
                             <TouchableOpacity
                                 onPress={() => {this.optionSelected(rowData)}}>
                                 <View style={{ justifyContent: 'center', alignItems: 'center', height: 30, borderBottomColor: '#efefef', borderBottomWidth: 1 }}>
                                     <Text style={{ fontSize: 14 }}>{rowData.title}</Text>
                                 </View>
                             </TouchableOpacity>
                         )
                     })
                 }
             </ScrollView>
             <TouchableOpacity onPress={()=>{this.onCancel()}}>
                 <View style={{marginTop:15,marginRight:10,width:200,marginLeft:10,marginBottom:15,backgroundColor:'#009AD6',height:35,justifyContent:'center',borderRadius:1}}>
                     <Text style={{textAlign:'center',color:'white',fontSize:15}}>取消</Text>
                 </View>
             </TouchableOpacity>
         </View>
     </View>
</Modal>

• animationType: 動畫類型
• transparent: 遮罩是否透明
• visible: 遮罩顯示開關，由外部傳遞的參數控制
• onRequestClose: 取消請求方法，用戶點擊物理返回鍵是調用
• Modal標籤中間部分爲展示佈局代碼

4. 兩個回調方法的實現

onCancel() {
   this.props.onCancel()
}

• note: 外部調用時，實現onCancel()回調方法

optionSelected(option) {
   this.props.onConfirm(option)
   this.onCancel()
}

• note: 外部調用時，實現onConfirm()回調方法

5. 外部調用

• 引入ListViewModal組件

import ListViewModal from '../../common/page/ListViewModal'

• 組件的使用

// 構造方法中：定義模擬數據
this.platFormData = [
            {
                "id": 0
                ,"title": "aaa"
            }
            ,{
                "id": 1
                ,"title": "bbb"
            }
            ,{
                "id": 2
                ,"title": "ccc"
            }
            ,{
                "id": 3
                ,"title": "ddd"
            },{
                "id": 4
                ,"title": "eee"
            }
            ,{
                "id": 5
                ,"title": "fff"
            }
        ]

// 構造方法中：組件初始狀態
this.state = {
    modalVisible: false
}

// render方法中：佈局調用組件
<ListViewModal
     title={'選擇平臺'}
     dataSource={this.platFormData}
     onCancel={() => { this.setState({ modalVisible: false })}}
     onConfirm={(option) => {
         console.log(JSON.stringify(option))
     }}
     modalVisible={this.state.modalVisible }
 />

 // render方法中：組件觸發事件
 <TouchableOpacity
     onPress={() => { this.setState({ modalVisible: true })}}>
</TouchableOpacity>