React Native學習教程之Modal控件自定義彈出View詳解

2020-07-26 02:39:26

字體：大中小

來源：轉載

供稿：網友

前言

最近在學習RN，好多知識都懶得寫，趁今天有空，來一發吧，Modal控件的一個小demo；下面話不多說了，來一起看看詳細的介紹吧。

參考文章地址：http://reactnative.cn/docs/0.27/modal.html#content

Modal組件可以用來覆蓋包含React Native根視圖的原生視圖（如UIViewController，Activity）。

在嵌入React Native的混合應用中可以使用Modal。Modal可以使你應用中RN編寫的那部分內容覆蓋在原生視圖上顯示。

下面是代碼：

// HomePage // 功能: 該類的作用 // Created by 小廣 on 2016-06-12 上午. // Copyright © 2016年 All rights reserved.  'use strict'; import React, { Component } from 'react'; import {  View,  Text,  Image,  Modal,  Navigator,  TextInput,  ScrollView,  StyleSheet,  Dimensions,  TouchableHighlight, } from 'react-native'; import NavigatorBar from '../tools/navigator' var { width, height, scale } = Dimensions.get('window'); // 類 export default class HomePage extends Component {  // 構造函數  constructor(props) {  super(props);  this.state = {   show:false,  };  }   // 加載完成  componentDidMount(){  //  }   // view卸載  componentWillUnmount(){  //  }   // 自定義方法區域  // your method  _leftButtonClick() {   }  _rightButtonClick() {  //  console.log('右側按鈕點擊了');  this._setModalVisible();  }   // 顯示/隱藏 modal  _setModalVisible() {  let isShow = this.state.show;  this.setState({   show:!isShow,  });  }   // 繪制View  render() {   return (   <View style={styles.container}>    <NavigatorBar    title='Modal測試'    titleTextColor='#F2380A'    rightItemTitle='按鈕'    rightTextColor='#F2380A'    rightItemFunc={this._rightButtonClick.bind(this)} />    <Modal    animationType='slide'    transparent={true}    visible={this.state.show}    onShow={() => {}}    onRequestClose={() => {}} >    <View style={styles.modalStyle}>     <View style={styles.subView}>     <Text style={styles.titleText}>      提示     </Text>     <Text style={styles.contentText}>      Modal顯示的View 多行了超出一行了會怎么顯示，就像這樣顯示了很多內容該怎么顯示，看看效果     </Text>     <View style={styles.horizontalLine} />     <View style={styles.buttonView}>      <TouchableHighlight underlayColor='transparent'      style={styles.buttonStyle}      onPress={this._setModalVisible.bind(this)}>      <Text style={styles.buttonText}>       取消      </Text>      </TouchableHighlight>      <View style={styles.verticalLine} />      <TouchableHighlight underlayColor='transparent'      style={styles.buttonStyle}      onPress={this._setModalVisible.bind(this)}>      <Text style={styles.buttonText}>       確定      </Text>      </TouchableHighlight>     </View>     </View>    </View>   </Modal>   </View>   );  }  } // Modal屬性 // 1.animationType bool 控制是否帶有動畫效果 // 2.onRequestClose Platform.OS==='android'? PropTypes.func.isRequired : PropTypes.func // 3.onShow function方法 // 4.transparent bool 控制是否帶有透明效果 // 5.visible bool 控制是否顯示  // css樣式 var styles = StyleSheet.create({  container:{  flex:1,  backgroundColor: '#ECECF0',  },  // modal的樣式  modalStyle: {  // backgroundColor:'#ccc',  alignItems: 'center',  justifyContent:'center',  flex:1,  },  // modal上子View的樣式  subView:{  marginLeft:60,  marginRight:60,  backgroundColor:'#fff',  alignSelf: 'stretch',  justifyContent:'center',  borderRadius: 10,  borderWidth: 0.5,  borderColor:'#ccc',  },  // 標題  titleText:{  marginTop:10,  marginBottom:5,  fontSize:16,  fontWeight:'bold',  textAlign:'center',  },  // 內容  contentText:{  margin:8,  fontSize:14,  textAlign:'center',  },  // 水平的分割線  horizontalLine:{  marginTop:5,  height:0.5,  backgroundColor:'#ccc',  },  // 按鈕  buttonView:{  flexDirection: 'row',  alignItems: 'center',  },  buttonStyle:{  flex:1,  height:44,  alignItems: 'center',  justifyContent:'center',  },  // 豎直的分割線  verticalLine:{  width:0.5,  height:44,  backgroundColor:'#ccc',  },  buttonText:{  fontSize:16,  color:'#3393F2',  textAlign:'center',  }, });

注意：NavigatorBar是我自定義的一個View，充當導航條，你可以將其換成一個按鈕就行了；

效果如圖：