《React-Native系列》元件封裝之Dialog（iOS和Android通用）

最近在專案中封裝了個Dialog元件，iOS和Android平臺上通用。

元件Dialog顯示時，從頁面頂部滑動到中間，點選確認或取消後，從頁面底部劃出頁面，需要注意動畫的實現。

原始碼如下：

[javascript] view plain copy

'use strict';
import React, { Component } from 'react';
import {
StyleSheet,
View,
Image,
Text,
TouchableHighlight,
Animated,
Easing,
Dimensions,
} from 'react-native';
import TimerMixin from 'react-timer-mixin';
const {width, height} = Dimensions.get('window');
const navigatorH = 64; // navigator height
const [aWidth, aHeight] = [270, 108];
const [left, top] = [0, 0];
const [middleLeft, middleTop] = [(width - aWidth) / 2, (height - aHeight) / 2 - navigatorH];
/**
* Dialog元件
* <Dialog ref="dialog" callback={this.callback.bind(this)}/>
* 呼叫show方法，調起元件 this.refs.dialog.show("確定刪除嗎");
*/
exportdefaultclass Dialog extends Component {
mixins = [TimerMixin];
parent ={};
constructor(props) {
super(props);
this.state = {
offset: new

Animated.Value(0),
opacity: new Animated.Value(0),
title: "",
hide: true,
};
}
render() {
if(this.state.hide){
return (<View />)
} else {
return (
<View style={styles.container} >
<Animated.View style={ styles.mask } >
</Animated.View>
<Animated.View style={[styles.tip , {transform: [{
translateY: this.state.offset.interpolate({
inputRange: [0, 1,2],
outputRange: [0, middleTop,height]
}),
}]
}]}>
<View style={styles.tipTitleView}>
<Text style={styles.tipTitleText}>{this.state.title}</Text>
</View>
<View style={styles.btnView}>
<TouchableHighlight style={styles.cancelBtnView} underlayColor='#f0f0f0' onPress={this.cancelBtn.bind(this)}>
<Text style={styles.cancelBtnText}>取消</Text>
</TouchableHighlight>
<TouchableHighlight style={styles.okBtnView} underlayColor='#f0f0f0' onPress={this.okBtn.bind(this)}>
<Text style={styles.okBtnText}>確定</Text>
</TouchableHighlight>
</View>
</Animated.View>
</View>
);
}
}
//顯示動畫
in() {
Animated.parallel([
Animated.timing(
this.state.opacity,
{
easing: Easing.linear,
duration: 500,
toValue: 0.8,
}
),
Animated.timing(
this.state.offset,
{
easing: Easing.linear,
duration: 500,
toValue: 1,
}
)
]).start();
}
//隱藏動畫
out(){
Animated.parallel([
Animated.timing(
this.state.opacity,
{
easing: Easing.linear,
duration: 500,
toValue: 0,
}
),
Animated.timing(
this.state.offset,
{
easing: Easing.linear,
duration: 500,
toValue: 2,
}
)
]).start();
setTimeout(
() => {
this.setState({hide: true});
//還原到頂部
Animated.timing(
this.state.offset,
{
easing: Easing.linear,
duration: 500,
toValue: 0,
}
).start();
},
500
);
}
//取消
cancelBtn(event) {
if(!this.state.hide){
this.out();
}
}
// doCallback(fn,args){
// fn.apply(this.parent, args);
// }
//選擇
okBtn() {
if(!this.state.hide){
this.out();
setTimeout(
() => {
let {callback} = this.props;
callback.apply(null,[]);
},
500
);
}
}
/**
* 彈出控制元件
* titile: 標題
*/
show(title: string) {
if(this.state.hide){
this.setState({title: title, hide: false}, this.in);
}
}
}
const styles = StyleSheet.create({
container: {
position:"absolute",
width:width,
height:height,
left:left,
top:top,
},
mask: {
justifyContent:"center",
backgroundColor:"#383838",
opacity:0.8,
position:"absolute",
width:width,
height:height,
left:left,
top:top,
},
tip: {
width:aWidth,
height:aHeight,
left:middleLeft,
backgroundColor:"#fff",
相關推薦

《React-Native系列》元件封裝之Dialog（iOS和Android通用）

最近在專案中封裝了個Dialog元件，iOS和Android平臺上通用。元件Dialog顯示時，從頁面頂部滑動到中間，點選確認或取消後，從頁面底部劃出頁面，需要注意動畫的實現。原始碼如下： [javascript] view plain copy

React Native WebView元件實現的BarCode（條形碼）、(QRCode)二維碼

react-native-barCode 採用React Native WebView元件實現的BarCode（條形碼）、QRCode(二維碼),其中QRCode的程式碼是參考 qrcode,修復了qrcode圖片會出現滾動條問題。https://github.com/

react-native從頭開始封裝三方sdk（二）

完成了第一步，下面開始飛。以整合騰訊信鴿推送為例註冊信鴿申請應用等按照騰訊文件來即可。（注意包名要是app的包名不是library的包名） ps:按照手動配置的方式出現support-v4重複引用問題，嘗試多種方式沒有解決。暫且放棄。使用jcent

機器學習演算法之CART（分類和迴歸樹）

CART演算法介紹：分類和迴歸樹（CART）是應用廣泛的決策樹學習方法。CART同樣由特徵選擇，樹的生成和減枝組成，既可以用於分類也可以用於迴歸。CART的生成就是遞迴的構建二叉決策樹的過程。對迴歸樹用平方誤差最小化（RMSE），對分類樹用基尼指數最小化準則

python之SSH（互動式和非互動式）

python中有一個paramiko，功能強大，用來做SSH比較方便先上程式碼 import paramikoclass SSHConnection(object): def __init__(self, host, port, username, passwo

【筆記】移動端H5數字鍵盤input type=number的處理（IOS和Android）

!= 字符串文檔代碼 || clear tcl rfi 導致在Vue中的項目，基於VUX-UI開發，一個常見的需求： 1、金額輸入框 2、彈出數字鍵盤 3、僅支持輸入兩位小數，限制最大11位數，不允許0開頭　　第一，首先想到額就是在VUX-UI中制定ty

Linux下源碼安裝Nginx（Ubuntu和CentOS通用）

fig 出現保存重啟nginx 文件添加 openssl make 檢測修改方法 1.下載nginx，鏈接地址：http://nginx.org/download/nginx-1.12.2.tar.gz，選擇linux版本（.tar.gz）（Nginx版本為1.12.

js h5頁面調起App（IOS 和android）的實現方法

js h5頁面調起App（IOS 和android）的實現方法第一次寫這個：我們的app是由原聲和h5組成的，當用戶使用瀏覽器開啟我們的頁面時我們會引導使用者使：開啟App 下載App 剛開始我是使用定時器來實現的，當用戶點選了開啟App經過一定時間之後沒有反應，則我們認為她調起App

Linux擴充套件磁碟空間到根目錄（Vmware和KVM通用）

最近因為公司伺服器大量構建專案導致虛機的根目錄嚴重不足，本著linux新手的心態到網上查閱資料，真的那個叫百家爭鳴啊（亂抄亂寫亂複製），不容易得解決了這個問題，今天來小結記錄下解決方法。 1. 在虛機管理器中增加掛載盤伺服器是個測試伺服器，裝了個 KVM 虛擬機器

頭部導航設定（ios 和android 同一種樣式），app.js舉例

注意：需要在controller 中注入$ionicConfigProvider // ios android 都預設讓title居中 $ionicConfigProvider.navBar.al

Cordova下自簽名證書無法訪問https問題（IOS和Android）

最近準備將專案上架到AppStore，但從17年開始，AppStore稽核條件要求所有網路請求都為https，所以就在內網（192.……）布好了自測環境，並將環境對映到了公網（58.……）。接著問題就

Array的簡單使用（Boost和STL通用）

[//]:#(Array的簡單使用（Boost和STL通用）) # 目錄 - [目錄](#目錄) - [介紹](#介紹) - [使用](#使用) - [Boost和STL的區別](#boost和stl的區別) # 介紹本來這一次是想簡單介紹一下Boost裡面的協程庫的使用的，但是`Boost.Cor

【REACT NATIVE 系列教程之四】重新整理元件RENDER(重新渲染)的三種方式詳解

開發過遊戲的都應該很清楚，“刷屏”是多麼的重要。其實開發應用也如此，當元件的資料被修改後，如何及時更新元件呈現出最新的資料與效果一樣至關重要。那麼這裡Himi大概講三種常用的方式：this.setState() 【最為常用】這是在事件處理函式中和請求回撥函式中觸發 UI 更新的主要方法。一般情況下setSt

《React-Native系列》15、 RN之可觸控元件

今天，我們來看下ReactNative提供的可觸控元件。分別為:TouchableHighlight、TouchableNativeFeedback、TouchableOpacity、TouchableWithoutFeedback。 TouchableWithoutFe

【REACT NATIVE 系列教程之十三】利用LISTVIEW與TEXTINPUT製作聊天/對話方塊&&獲取元件例項常用的兩種方式

補充說明：一：很多童鞋問，鍵盤調出來被擋住了，那麼下面給出三個解決方案：1. 在render最外層包一個ScrollView，然後當鍵盤調出時，scrollTo即可實現。2. 在底部新增一個可變化高度的view，根據鍵盤獲取、失去焦點時，進行處理實現二：有的童鞋說對話方塊的背景沒有根據內容長短自適應，OK ，

《React-Native系列》3、RN與native交互之Callback、Promise

pan resolv str string callback 多次調用 modules 函數等待接著上一篇《React-Native系列》RN與native交互與數據傳遞，我們接下來研究另外的兩種RN與Native交互的機制一、Callback機制首先Calllba

React-Native系列Android——Native與Javascript通信原理（一）

from 直接最新一點明顯 rem 負責 receive esp React-Native最核心的是Native與Javascript之間的通信，並且是雙向通信

基於React Native官方元件Image封裝的具備載入生命週期視覺反饋的元件react-native-loading-image

react-native-loading-image 基於React Native官方元件Image封裝的具備載入生命週期視覺反饋的元件,具體實現功能如下：網路圖片Pending狀態渲染，提供閃爍動畫、loading.gif兩種方式網路圖片Error狀態渲染

【REACT NATIVE 系列教程之十】真機執行報錯COMMAND /BIN/SH FAILED WITH EXIT CODE 1 的解決方法

Himi最近在真機執行遇到 Command /bin/sh failed with exit code 1 的錯誤，模擬器執行沒有任何問題。此問題已解決，這裡分享下解決方案。先來看下錯誤日誌，如下圖：主要是劃線的部分：1.PhaseScriptExecution Bundle\ React\ Nativ

【React Native】原始碼分析之Native UI的封裝和管理

ReactNative作為使用React開發Native應用的新框架，隨著時間的增加，無論是社群還是個人對她的興趣與日遞增。此文目的是希望和大家一起欣賞一下ReactNative的部分原始碼。閱讀原始碼好處多多，讓攻城獅更溜的開發ReactNative應

《React-Native系列》元件封裝之Dialog（iOS和Android通用）

相關推薦