2. 程式人生 > >React Native 控制元件之 Modal 詳解

React Native 控制元件之 Modal 詳解

阿新 • • 發佈：2019-01-24

今天我們來看一下React Native控制元件Modal具體介紹以及實際使用方法,該適配Android、iOS雙平臺。

剛建立的React Native技術交流4群( 458982758 ),歡迎各位大牛,React Native技術愛好者加入交流!同時部落格右側歡迎微信掃描關注訂閱號,移動技術乾貨,精彩文章技術推送!

Modal檢視在iOS原生開發中熟稱:"模態檢視",Modal進行封裝之後，可以彈出來覆蓋包含React Native跟檢視的原生介面(例如:UiViewControllView,Activity)。在使用React Native開發的混合應用中使用Modal元件，該可以讓你使用RN開發的內功呈現在原生檢視的上面。

如果你使用React Native開發的應用，從跟檢視就開始開發起來了，那麼你應該是Navigator導航器進行控制頁面彈出，而不是使用Modal模態檢視。通過頂層的Navigator，你可以使用configureScene屬性進行控制如何在你開發的App中呈現一個Modal檢視。

(二)屬性方法

1.animated bool  控制是否帶有動畫效果

2.onRequestClose  Platform.OS==='android'? PropTypes.func.isRequired : PropTypes.func

3.onShow function方法

4.transparent bool  控制是否帶有透明效果

5.visible  bool 控制是否顯示

(三)例項

上面我們已經對於Modal元件做了相關介紹，下面我們使用一個例項具體來演示一下Modal元件的基本用法。首先來看一下具體程式碼:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  Modal,
  Switch,
} from
 
 'react-native';

class Button extends React.Component {
  constructor(props){
    super(props);
    this.state={
      active: false,
    };
    this._onHighlight = this.onHighlight.bind(this);
    this._onUnhighlight = this.onUnhighlight.bind(this);
  }

  onHighlight() {
    this.setState({active: true,});
  }

  onUnhighlight() {
    this.setState({active: false,});
  }

  render() {
    var colorStyle = {
      color: this.state.active ? '#fff' : '#000',
    };
    return (
      <TouchableHighlight
        onHideUnderlay={this._onUnhighlight}
        onPress={this.props.onPress}
        onShowUnderlay={this._onHighlight}
        style={[styles.button, this.props.style]}
        underlayColor="#a9d9d4">
          <Text style={[styles.buttonText, colorStyle]}>{this.props.children}</Text>
      </TouchableHighlight>
    );
  }
}

class ModalDemo extends Component {
  constructor(props){
    super(props);
    this.state={
      animationType: false,
      modalVisible: false,
      transparent: false,

    };
    this._toggleTransparent = this.toggleTransparent.bind(this);
  }

  _setModalVisible(visible) {
    this.setState({modalVisible: visible});
  }

  _setAnimationType(type) {
    this.setState({animationType: type});
  }

  toggleTransparent() {
    this.setState({transparent: !this.state.transparent});
  }

  render() {
     const modalBackgroundStyle = {
      backgroundColor: this.state.transparent ? 'rgba(0, 0, 0, 0.5)' : '#f5fcff',
     }
     const innerContainerTransparentStyle = this.state.transparent
      ? {backgroundColor: 'red', padding: 20}
      : null

   return (
      <View style={{paddingTop:20,paddingLeft:10,paddingRight:10}}>
        <Text style={{color:'red'}}>Modal例項演示</Text>
        <Modal
          animated={this.state.animationType}
          transparent={this.state.transparent}
          visible={this.state.modalVisible}
          onRequestClose={() => {this._setModalVisible(false)}}
          >
          <View style={[styles.container, modalBackgroundStyle]}>
            <View style={[styles.innerContainer, innerContainerTransparentStyle]}>
              <Text>Modal檢視被顯示:{this.state.animationType === false ? '沒有' : '有',this.state.animationType}動畫效果.</Text>
              <Button
                onPress={this._setModalVisible.bind(this, false)}
                style={styles.modalButton}>
                  關閉Modal
              </Button>
            </View>
          </View>
        </Modal>
        <View style={styles.row}>
          <Text style={styles.rowTitle}>動畫型別</Text>
          <Button onPress={this._setAnimationType.bind(this,false)} style={this.state.animationType === false ? {backgroundColor:'red'}: {}}>
            無動畫
          </Button>
          <Button onPress={this._setAnimationType.bind(this, true)} style={this.state.animationType === true ? {backgroundColor:'yellow'} : {}}>
            滑動效果
          </Button>
        </View>

        <View style={styles.row}>
          <Text style={styles.rowTitle}>透明</Text>
          <Switch value={this.state.transparent} onValueChange={this._toggleTransparent} />
        </View>

        <Button onPress={this._setModalVisible.bind(this, true)}>
            顯示Modal
        </Button>
      </View>
    )}
  }

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
  innerContainer: {
    borderRadius: 10,
    alignItems: 'center',
  },
  row: {
    alignItems: 'center',
    flex: 1,
    flexDirection: 'row',
    marginBottom: 20,
  },
  rowTitle: {
    flex: 1,
    fontWeight: 'bold',
  },
  button: {
    borderRadius: 5,
    flex: 1,
    height: 44,
    alignSelf: 'stretch',
    justifyContent: 'center',
    overflow: 'hidden',
  },
  buttonText: {
    fontSize: 18,
    margin: 5,
    textAlign: 'center',
  },
  modalButton: {
    marginTop: 10,
  },
});

AppRegistry.registerComponent('ModalDemo', () => ModalDemo);

執行效果如下:

iOS平臺執行效果

Android平臺執行效果:

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

在嵌入React Native的混合應用中可以使用Modal。Modal可以使你應用中RN編寫的那部分內容覆蓋在原生檢視上顯示。
下面是程式碼：

  1. //  HomePage  
  2. //  功能: 該類的作用  
  3. //  Created by 小廣 on  2016-06-12 上午.  
  4. //  Copyright © 2016年  All rights reserved.  
  5. 'use strict';  
  6. import React, { Component } from 'react';  
  7. import {  
  8.   View,  
  9.   Text,  
  10.   Image,  
  11.   Modal,  
  12.   Navigator,  
  13.   TextInput,  
  14.   ScrollView,  
  15.   StyleSheet,  
  16.   Dimensions,  
  17.   TouchableHighlight,  
  18. } from 'react-native';  
  19. import NavigatorBar from '../tools/navigator'  
  20. var { width, height, scale } = Dimensions.get('window');  
  21. // 類  
  22. export default class HomePage extends Component {  
  23.   // 建構函式  
  24.   constructor(props) {  
  25.     super(props);  
  26.     this.state = {  
  27.       show:false,  
  28.     };  
  29.   }  
  30.   // 載入完成  
  31.   componentDidMount(){  
  32.     //  
  33.   }  
  34.   // view解除安裝  
  35.   componentWillUnmount(){  
  36.     //  
  37.   }  
  38.   // 自定義方法區域  
  39.   // your method  
  40.   _leftButtonClick() {  
  41.   }  
  42.   _rightButtonClick() {  
  43.     //  
  44.     console.log('右側按鈕點選了');  
  45.     this._setModalVisible();  
  46.   }  
  47.   // 顯示/隱藏 modal  
  48.   _setModalVisible() {  
  49.     let isShow = this.state.show;  
  50.     this.setState({  
  51.       show:!isShow,  
  52.     });  
  53.   }  
  54.   // 繪製View  
  55.   render() {  
  56.      return (  
  57.        <Viewstyle={styles.container}>
  58.          <NavigatorBar
  59.            title='Modal測試'
  60.            titleTextColor='#F2380A'
  61.            rightItemTitle='按鈕'
  62.            rightTextColor='#F2380A'
  63.            rightItemFunc={this._rightButtonClick.bind(this)} />
  64.          <Modal
  65.            animationType='slide'
  66.            transparent={true}  
  67.            visible={this.state.show}  
  68.            onShow={() => {}}  
  69.            onRequestClose={() => {}} >
  70.            <Viewstyle={styles.modalStyle}>
  71.              <Viewstyle={styles.subView}>
  72.                <Textstyle={styles.titleText}>
  73.                  提示  
  74.                </Text>
  75.                <Textstyle={styles.contentText}>
  76.                  Modal顯示的View 多行了超出一行了會怎麼顯示，就像這樣顯示了很多內容該怎麼顯示，看看效果  
  77.                </Text>
  78.                <Viewstyle={styles.horizontalLine} />
  79.                <Viewstyle={styles.buttonView}>
  80.                  <TouchableHighlightunderlayColor='transparent'
  81.                    style={styles.buttonStyle}  
  82.                    onPress={this._setModalVisible.bind(this)}>
  83.                    <Textstyle={styles.buttonText}>
  84.                      取消  
  85.                    </Text>
  86.                  </TouchableHighlight>
  87.                  <Viewstyle={styles.verticalLine} />
  88.                  <TouchableHighlightunderlayColor='transparent'
  89.                    style={styles.buttonStyle}  
  90.                    onPress={this._setModalVisible.bind(this)}>
  91.                    <Textstyle={styles.buttonText}>
  92.                      確定  
  93.                    </Text

    相關推薦

    React Native 控制元件之 Modal 詳解

    今天我們來看一下React Native控制元件Modal具體介紹以及實際使用方法,該適配Android、iOS雙平臺。 剛建立的React Native技術交流4群( 458982758 ),歡迎各位大牛,React Native技術愛好者加入交流!同時部落格右側歡迎

    【React Native開發】React Native控制元件之RefreshControl元件詳解(21)

    轉載請標明出處：(一)前言         【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新，請大家關注收藏:http://www.lcode.org        今天我們一起來看一下RefreshControl下拉重新整理元件講解以及使用例項剛建立的React Native技術交

    美團React Native基礎元件庫beeshell詳解

    近年來，伴隨著大前端概念的提出和興起，移動端和前端的邊界變得越來越模糊，湧現了一大批移動跨平臺開發框架和模式。從早期的PhoneGap、inoc等Hybird技術，到現在耳熟能詳的React Native、Weex和Flutter等技術，無不體現著移動端開發的前

    安卓四大控制元件之BroadcastReceiver詳解

    BroadcastReceiver詳解 廣播的概念 Android：系統在產生某個事件時傳送廣播，應用程式使用廣播接收者接收這個廣播，就知道系統產生了什麼事件。 Android系統在執行的過程中，會產生很多事件，比如開機、電量改變、收發簡訊、撥打電話、螢

    【React Native開發】React Native控制元件之Image元件講解與美團首頁頂部效果例項(10)

    轉載請標明出處：(一)前言        【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新，請大家關注收藏:http://www.lcode.org      今天我們一起來看一下Image元件的相關使用講解以及模仿實現一下美團首頁頂部分類的效果。具體環境搭建以及相關配置的請檢視之前

    【React Native開發】React Native控制元件之TextInput元件講解與QQ登入介面實現(11)

    轉載請標明出處：(一)前言      【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新，請大家關注收藏:http://www.lcode.org       今天我們一起來看一下文字輸入框TextInput元件的相關使用講解以及模仿實現一下QQ登入介面的效果。具體環境搭建以及相關配置

    【React Native開發】React Native控制元件之ListView元件講解以及最齊全例項(19)

    轉載請標明出處：(一)前言        【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新，請大家關注收藏:http://www.lcode.org今天我們一起來看一下ListView元件的使用詳解以及具體事例剛建立的React Native技術交流3群(496508742),Rea

    【React Native開發】React Native控制元件之View檢視講解(7)

    轉載請標明出處：(一)前言      【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新，請大家關注收藏:http://www.lcode.org       現在幾講我們對於R

    【React Native開發】React Native控制元件之DrawerLayoutAndroid抽屜導航切換元件講解(13)

    轉載請標明出處：(一)前言      【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新，請大家關注收藏:http://www.lcode.org       今天我們一起來看一

    【React Native開發】React Native控制元件之Switch開關與Picker選擇器元件講解以及使用(16)

    轉載請標明出處：(一)前言       【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新，請大家關注收藏:http://www.lcode.org       今天我們一起來看

    Android開發之自定義控制元件(一)---onMeasure詳解

             話說一個有十年的程式設計經驗的老漢，決定改行書法，在一個熱火炎炎的中午，老漢拿著毛筆，在一張白紙上寫了個“Hello World!”，從此開啟了他的書法旅程。那麼問題來了請問自定義一個控制元件需要怎樣的流程？我們經常說自定義控制元件，那麼究竟怎樣去自定義一

    Android開發之最新Recyclerview控制元件的使用詳解（一）

        本篇博文主要給大家分享關於RecyclerView控制元件的使用及通過繼承RecyclerView來實現滑動時載入圖片的優化方案，也同樣能解決防止圖片亂序的問題，之前有在網上有看到大神對Android中ListView非同步載入圖片亂序問題進行過分析，並深入剖析原理

    react-native模擬機調試步驟詳解 ——親測有效！！！！

    setting div 目的 post 127.0.0.1 med 我沒 -a RF 步驟 1 下載安裝夜神模擬器,去夜神官網下載即可!然後安裝完成!進入到初始化項目的目錄,打開cmd命令,運行adb connect 127.0.0.1:62001 鏈接模擬器

    Android四大元件之ContentProvider詳解

    1.適用場景 1) ContentProvider為儲存和讀取資料提供了統一的介面 2) 使用ContentProvider，應用程式可以實現資料共享 3) android內建的許多資料都是使用ContentProvider形式，供開發者呼叫的(如視訊，音訊，圖片，

    Android四大元件之Activity詳解

    一、Activity的生命週期： import android.app.Activity; import android.os.Bundle; public class MainActivity extends Activity { /*建立Activity時被

    Android 四大元件之---Activity 詳解

    Android Activity生命週期詳解 1. 什麼是Activity？ Activity作為Android四大元件之一，它有著舉足輕重的地位，每一個Activity都會獲得一個用於繪製其使用者介面的視窗，Activity是一個v

    iOS:選擇器控制元件UIPickerView的詳解和演示

    #import "ViewController.h" 2 3 @interface ViewController () 4 @property (weak, nonatomic) IBOutlet UIPickerView *pickerView; 5 6 @end

    C#介面控制元件DotNetBar使用詳解

        一般來說，運用傳統的介面控制元件元素，合理設計佈局，能夠設計出比較中規中矩的標準介面；利用一些換膚的控制元件或者部分介面元件，能夠設計出相對好看一些的介面效果，如以前很盛行的ActiveSkin、IrisSkin和DotNetSkin等，這些能夠對傳統的介面元素進行

    Android自定義控制元件系列：詳解onMeasure()方法中如何測量一個控制元件尺寸(一)

    轉載請註明出處：http://blog.csdn.net/cyp331203/article/details/45027641 今天的任務就是詳細研究一下protected void onMeasure(int widthMeasureSpec, int he

    Qt獲取控制元件位置座標詳解

    1.     QPoint QMouseEvent::pos()      這個只是返回相對這個widget(過載了QMouseEvent的widget)的位置。       const Returns the position of the mouse cursor, r