react native 彈出編輯對話方塊

阿新 • • 發佈：2019-02-17

類似於蘋果手機的彈出效果，動畫很流暢，效果如圖所示：http://www.jianshu.com/p/36ec413f7098

效果圖

分析實現過程

1.設定應用到的元件狀態

this.state = {
    isShow: false,
    inputText: '',
    opacityAnimationValue: new Animated.Value(0),
    scaleAnimationValue: new Animated.Value(0)
}

opacityAnimationValue：表示彈出框的透明度；
scaleAnimationValue：表示彈出框的縮放倍數，模擬它從小變大的動畫；

2.設定開啟對話方塊的動畫效果

// 開啟對話方塊
show() {
    this.setState({
        isShow: true,
        inputText: this.props.inputText
    });

    //Animated.parallel == 同時執行多個動畫
    Animated.parallel([
        //Animated.timing == 推動一個值按照一個過渡曲線而隨時間變化
        Animated.timing(this.state.opacityAnimationValue, {
            toValue 
: 1,
            duration: 200 + 100
        }),
        //Animated.spring == 產生一個基於Rebound和Origami實現的Spring動畫。它會在toValue值更新的同時跟蹤當前的速度狀態，以確保動畫連貫,比timing動畫連貫流暢
        Animated.spring(this.state.scaleAnimationValue, {
            toValue: 1,
            duration: 200,
            friction: 5
        })
    ]).start 
();
}

注意：Animated.parallel表示輔助函式，可以同時執行多個動畫；
Animated.timing和Animated.spring有一些動畫效果上的區別，其中Animated.spring動畫效果更連貫漂亮；

3.設定關閉對話方塊的方法

// 關閉對話方塊
_close() {
    this.setState({isShow: false});
    this.state.opacityAnimationValue.setValue(0);
    this.state.scaleAnimationValue.setValue(0);
}

4.重點看一下render方法

render() {
    // 如果消失，返回null 用於控制顯示隱藏
    if (!this.state.isShow) return null;
    // 向父元件開放兩個介面，自定義標題文字和點選確定後傳送的事件 
    const {ensureCallback,titleTxt} = this.props;

    return (
        // 最外層是一個半透明的黑色蒙版背景,點選的時候對話方塊也會消失
        <Animated.View style={[styles.container, {opacity: this.state.opacityAnimationValue}]}>
            <TouchableOpacity
                activeOpacity={1}
                style={{flex: 1, alignItems: 'center', paddingTop: 100}}
                // 點選外層的黑色蒙版，對話方塊也會消失
                onPress={this._close}
            >
                <Animated.View
                    style={[styles.contentContainer, {transform: [{scale: this.state.scaleAnimationValue}]}]}
                >
                    <TouchableOpacity
                        activeOpacity={1}
                        style={styles.promptContainer}
                    >
                        <Text style={{fontSize: 15, color: 'black'}}>{titleTxt}</Text>
                        <View style={{flexDirection: 'row', margin: 15}}>
                            <View style={[styles.center, {width: 230}]}>
                                <TextInput
                                    style={{fontSize: 16, color: '#999',width:150,padding:0}}
                                    value={this.state.inputText}
                                    autoFocus={true}
                                    underlineColorAndroid="transparent"
                                    onChangeText={text => this.setState({inputText:text})}
                                />
                            </View>
                            <TouchableOpacity
                                onPress={() => this.setState({inputText: ''})}
                                style={[styles.center, {width: 20}]}>
                                <Image
                                    source={require('../../../assets/img/close.png')}
                                    style={{width: 18, height: 18}}
                                />
                            </TouchableOpacity>
                        </View>
                    </TouchableOpacity>
                    <View style={styles.buttonContainer}>
                        <TouchableOpacity
                            activeOpacity={0.75}
                            style={[styles.center, {flex: 4.5}]}
                            onPress={this._close}
                        >
                            <Text style={{fontSize: 16, color: 'black'}}>取消</Text>
                        </TouchableOpacity>
                        <View style={[styles.line]}/>
                        <TouchableOpacity
                            activeOpacity={0.75}
                            style={[styles.center, {flex: 4.5}]}
                            onPress={() => {
                                this._close();
                                // 子元件傳遞資料到父元件 
                                ensureCallback(this.state.inputText);
                            }}
                        >
                            <Text style={{fontSize: 16, color: 'black'}}>確定</Text>
                        </TouchableOpacity>
                    </View>
                </Animated.View>
            </TouchableOpacity>
        </Animated.View>
    )
}

著重說一下transform樣式的書寫，這裡用到了陣列的形式：

transform [{perspective: number}, {rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}, {skewX: string}, {skewY: string}]

5.來看樣式：

const styles = StyleSheet.create({
    container: {
        position: 'absolute',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
        backgroundColor: 'rgba(1, 1, 1, 0.5)'
    },
    contentContainer: {
        justifyContent: 'center',
        alignItems: 'center',
        borderColor: '#d9d9d9',
        borderWidth: 1,
        height: 150,
        width: screenW * 0.75,
        backgroundColor: 'rgb(234, 234, 235)',
        borderRadius: 5,
    },
    promptContainer: {
        height: 100,
        width: screenW * 0.75,
        alignItems: 'center',
        justifyContent: 'center'
    },
    buttonContainer: {
        height: 50,
        width: screenW * 0.75,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        borderTopWidth: 1,
        borderColor: '#d9d9d9'
    },
    line: {
        height: 46,
        width: 1,
        backgroundColor: '#d9d9d9'
    },
    center: {
        justifyContent: 'center',
        alignItems: 'center'
    }
})

5.如何引用到專案中

1.引入元件

import EditView from './EditView';

2.把元件放到合適的位置，最好是最外層容器的裡邊

<EditView
        // 在元件中使用this.editView即可訪拿到EditView元件
        ref={editView => this.editView = editView}
        inputText={this.state.name}
        titleTxt={'修改XXX'}
        ensureCallback={name => this.setState({name})}
    />

3.呼叫它出現的方法

...
<TouchableOpacity onPress={()=>this.editView.show()}     style={[styles.receiveViewStyle,{marginTop:20}]}>
    <View style={[styles.receiveViewStyle,{backgroundColor:'red'}]}>
      <Text style={styles.receiveTxtStyle}>點選編輯</Text>
    </View>
  </TouchableOpacity>
...

4.或者直接這樣呼叫：

<EditView
        // 在元件中使用this.editView即可訪拿到EditView元件
        ref="editView"
        inputText={this.state.name}
        titleTxt={'修改XXX'}
        ensureCallback={name => this.setState({name})}
    />

    ...


<TouchableOpacity onPress={()=>this.refs.editView.show()}     style={[styles.receiveViewStyle,{marginTop:20}]}>
    <View style={[styles.receiveViewStyle,{backgroundColor:'red'}]}>
      <Text style={styles.receiveTxtStyle}>點選編輯</Text>
    </View>
  </TouchableOpacity>

最後，貼出EditView.js的原始碼

/**
 * Created by gewd on 2017/5/2.
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    Animated,
    Platform,
    TextInput,
    Image,
    Dimensions
} from 'react-native';
const screenW = Dimensions.get('window').width;

export default class EditView extends Component {
    constructor(props) {
        super(props);
        this.show = this.show.bind(this);
        this._close = this._close.bind(this);
        this.state = {
            isShow: false,
            inputText: '',
            opacityAnimationValue: new Animated.Value(0),
            scaleAnimationValue: new Animated.Value(0)
        }
    }

    // 開啟對話方塊
    show() {
        this.setState({
            isShow: true,
            inputText: this.props.inputText
        });

        //Animated.parallel == 同時執行多個動畫
        Animated.parallel([
            //Animated.timing == 推動一個值按照一個過渡曲線而隨時間變化
            Animated.timing(this.state.opacityAnimationValue, {
                toValue: 1,
                duration: 200 + 100
            }),
            //Animated.spring == 產生一個基於Rebound和Origami實現的Spring動畫。它會在toValue值更新的同時跟蹤當前的速度狀態，以確保動畫連貫,比timing動畫連貫流暢
            Animated.spring(this.state.scaleAnimationValue, {
                toValue: 1,
                duration: 200,
                friction: 5
            })
        ]).start();
    }

    // 關閉對話方塊
    _close() {
        this.setState({isShow: false});
        this.state.opacityAnimationValue.setValue(0);
        this.state.scaleAnimationValue.setValue(0);
    }

    render() {
        if (!this.state.isShow) return null;

        const {ensureCallback,titleTxt} = this.props;

        return (
            // 最外層是一個半透明的黑色蒙版背景,點選的時候對話方塊也會消失
            <Animated.View style={[styles.container, {opacity: this.state.opacityAnimationValue}]}>
                <TouchableOpacity
                    activeOpacity={1}
                    style={{flex: 1, alignItems: 'center', paddingTop: 100}}
                    onPress={this._close}
                >
                    <Animated.View
                        style={[styles.contentContainer, {transform: [{scale: this.state.scaleAnimationValue}]}]}
                    >
                        <TouchableOpacity
                            activeOpacity={1}
                            style={styles.promptContainer}
                        >
                            <Text style={{fontSize: 15, color: 'black'}}>{titleTxt}</Text>
                            <View style={{flexDirection: 'row', margin: 15}}>
                                <View style={[styles.center, {width: 230}]}>
                                    <TextInput
                                        style={{fontSize: 16, color: '#999',width:150,padding:0}}
                                        value={this.state.inputText}
                                        autoFocus={true}
                                        underlineColorAndroid="transparent"
                                        onChangeText={text => this.setState({inputText:text})}
                                    />
                                </View>
                                <TouchableOpacity
                                    onPress={() => this.setState({inputText: ''})}
                                    style={[styles.center, {width: 20}]}>
                                    <Image
                                        source={require('../../../assets/img/close.png')}
                                        style={{width: 18, height: 18}}
                                    />
                                </TouchableOpacity>
                            </View>
                        </TouchableOpacity>
                        <View style={styles.buttonContainer}>
                            <TouchableOpacity
                                activeOpacity={0.75}
                                style={[styles.center, {flex: 4.5}]}
                                onPress={this._close}
                            >
                                <Text style={{fontSize: 16, color: 'black'}}>取消</Text>
                            </TouchableOpacity>
                            <View style={[styles.line]}/>
                            <TouchableOpacity
                                activeOpacity={0.75}
                                style={[styles.center, {flex: 4.5}]}
                                onPress={() => {
                                    this._close();
                                    // 子元件傳遞資料到父元件 
                                    ensureCallback(this.state.inputText);
                                }}
                            >
                                <Text style={{fontSize: 16, color: 'black'}}>確定</Text>
                            </TouchableOpacity>
                        </View>
                    </Animated.View>
                </TouchableOpacity>
            </Animated.View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        position: 'absolute',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
        backgroundColor: 'rgba(1, 1, 1, 0.5)'
    },
    contentContainer: {
        justifyContent: 'center',
        alignItems: 'center',
        borderColor: '#d9d9d9',
        borderWidth: 1,
        height: 150,
        width: screenW * 0.75,
        backgroundColor: 'rgb(234, 234, 235)',
        borderRadius: 5,
    },
    promptContainer: {
        height: 100,
        width: screenW * 0.75,
        alignItems: 'center',
        justifyContent: 'center'
    },
    buttonContainer: {
        height: 50,
        width: screenW * 0.75,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        borderTopWidth: 1,
        borderColor: '#d9d9d9'
    },
    line: {
        height: 46,
        width: 1,
        backgroundColor: '#d9d9d9'
    },
    center: {
        justifyContent: 'center',
        alignItems: 'center'
    }
})

react native 彈出編輯對話方塊

類似於蘋果手機的彈出效果，動畫很流暢，效果如圖所示：http://www.jianshu.com/p/36ec413f7098 效果圖分析實現過程 1.設定應用到的元件狀態 this.state = { isShow: false, i

實現對gridview刪除行時彈出確認對話方塊的一種簡單方法

首先，在GridView的屬性對框話框中點選“Columns”進入它的“欄位”設計器。接著在“欄位”設計器中選擇以前已加上的那個CommandField“刪除”列，這時在它的屬性列表下會看到一個“將此它段轉換為 TemplateFied”的項，點選將它轉換為TemplateFied列。完後退出該欄位設計器，切

phpstorm IDEA 雙擊Shift鍵會彈出 SearchEverywhere 對話方塊，如何取消這個功能

解決方法：一：Open lib/resources.jar/idea/PlatformActions.xml and remove or comment such line: <action id="SearchEverywhere" class="com.intel

Layui關閉彈出層對話方塊--重新整理父介面

在畢設的開發中，新增使用者、新增許可權等等一些地方需要類似於bootstrap中的模態框。然而開發用的卻是layui 在layui中有彈出層可以實現其中的效果。但是，一般用的時候都是提交後關閉視窗，重新整理父介面。這裡記錄一下方法 var index = parent.layer.getFrameIn

jsp 頁面中點選刪除按鈕後彈出確認對話方塊

如何在網頁上彈出一個對話方塊顯示一些內容javascript

1.下載並引用js檔案 dialog.js 及其css檔案dialog.css <script language="javascript" type="text/javascript" src="jquery.min.js"></script> &

【Bootstrap】一個在當前網頁彈出的對話方塊，可以關閉，不用跳轉，非彈窗

使用彈窗在網頁中顯示簡訊息還行，雖然不那麼地友好。然而，彈窗對於如同網站服務條款的長資訊就無能為力的了。這是需要使用一個叫模態框modal的東西，並且在模態框裡面嵌入一個多行文字框textarea。這個東西，如果要手工寫JavaScript程式碼就太難做了，但是使用Boo

JS模態對話方塊彈出（對話方塊嵌入網頁）

<html> <head> <title>JS彈出一個網頁對話方塊，後面全變灰，並不可用。</title> <meta http-equiv="Content-Type" content="text/html; char

Qt彈出標準對話方塊的方法，並警告內容寫中文

‘參考網址： https://blog.csdn.net/zong596568821xp/article/details/78999311 警告：警告考慮使用中文： QMessageBox::warning(NULL, QStringLiteral("警告"), QString

iOS開發——ActionSheet的使用與彈出選擇對話方塊

在我們的iOS開發中，常會見到如下介面的需求：。【使用ActionSheet實現】（1）實現程式碼如下：#import "ViewController.h" @interface ViewController ()<UIActionSheetDelegate

如何取消WIN2008下應用報錯後彈出的對話方塊程式已停止要求關閉程式

在WIN2003下如果應用報錯後不會有任何提示，我這裡有看門狗會直接將DOWN掉的應用拉起來。但是在WIN2008下偶爾會應用DOWN掉後提示如下的對話方塊，此時看門狗不會去啟動應用，必須要手動點選關閉程式按鈕後看門狗才能把DOWN掉的應用拉起來。這樣就不能做到無人值守了。

MFC 非模態對話方塊彈出的對話方塊閃了一下就消失了

CTestDialog *pTestDlg = new CTestDialog(); pTestDlg->Create(IDD_DIALOG_TEST, this); pTestDlg->ShowWindow(SW_SHOW); ///下面三行錯誤 //

Android彈出圓角對話方塊

Android系統提供的對話方塊，預設是方的，很不美觀，一般我們都是自定義圓角對話方塊。下面看一下圓角對話方塊的簡單試用。先上效果圖：很簡單，就是activity上一個按鈕，點選按鈕彈出圓角對話方塊。下面看程式碼：最最重要的s

解決Adobe Flash Player彈出安全性對話方塊

第一種方法：在本地用IE開啟Flash動畫並擊點Flash中的連線時一般都會彈出Adobe Flash Player安全性對話方塊，這是Flash Player的一個安全機制，我們可以點選下圖中的“設定”按鈕來去除這個提示，這樣以後這個彈出視窗就不會再騷擾我們了。

jquery外掛封裝：彈出div對話方塊

以前封裝了一個Div彈出的jquery外掛， jQuery特效之浮動div模式框，這個外掛封裝的原則追求最簡潔，只負責彈出的行為，不負責樣式。而這次的封裝是基於上個外掛的封裝進行進一步的封裝，封裝一個完整的浮動div彈出外掛.先看效果圖：優勢： -

點選按鈕button,彈出一個對話方塊輸入資料

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/

安卓學習筆記(10)-自定義彈出式對話方塊

之前學習彈出式對話方塊的時候，我們可以在AlertDialog中放置我們自己設計的佈局內容，如TextView，EditView，多選框，單選框等等，但是按鈕使用的都是其自帶的PositiveButton和NegativeButton，最多可使用三個按鈕

react-native modal自定義對話方塊

效果如圖：程式碼： react native版本0.39.0 /** * Created by xq on 16/12/6. */ import React, { Component ,PropTypes} from 'react'; import { T

取消window下應用報錯後彈出的對話方塊程式已停止要求關閉程式對話方塊

在window 7中的程式，當程式有異常時，會彈出一個錯誤對話方塊，並且不手動關閉這個錯誤對話方塊，程式不會完全退出來，如下圖所示：如果要禁用當程式出現異常時不彈出錯誤對話方塊只需要將以下注冊表

點選網頁上的聯絡我們彈出QQ對話方塊的實現

<a target="_blank" href="http://wpa.qq.com/msgrd?v=1&uin=QQ號碼&site=qq&menu=yes"> <img sr

react native 彈出編輯對話方塊

1.設定應用到的元件狀態

2.設定開啟對話方塊的動畫效果

3.設定關閉對話方塊的方法

4.重點看一下render方法

5.來看樣式：

5.如何引用到專案中

最後，貼出EditView.js的原始碼

相關推薦