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

更新時間：2017年10月18日 10:00:27 作者：開發(fā)仔XG

這篇文章主要給大家介紹了關于React Native學習教程之Modal控件自定義彈出View的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用React Native具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。

前言

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

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

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

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

下面是代碼：

// 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 { 
 // 構(gòu)造函數(shù) 
 constructor(props) { 
 super(props); 
 this.state = { 
  show:false, 
 }; 
 } 
 
 // 加載完成 
 componentDidMount(){ 
 // 
 } 
 
 // view卸載 
 componentWillUnmount(){ 
 // 
 } 
 
 // 自定義方法區(qū)域 
 // your method 
 _leftButtonClick() { 
 
 } 
 _rightButtonClick() { 
 // 
 console.log('右側(cè)按鈕點擊了'); 
 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 多行了超出一行了會怎么顯示，就像這樣顯示了很多內(nèi)容該怎么顯示，看看效果 
    </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', 
 }, 
 // 內(nèi)容 
 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，充當導航條，你可以將其換成一個按鈕就行了；

效果如圖：