近期項(xiàng)目中用到一些彈框界面限煞，經(jīng)過(guò)幾次優(yōu)化后覺(jué)得挺好用，所以分享給大家员凝。
效果
彈框.gif
思路
實(shí)現(xiàn)方法很簡(jiǎn)單署驻，就做幾個(gè)動(dòng)畫，沒(méi)什么可說(shuō)的健霹⊥希可以根據(jù)自己需求做一些調(diào)整。
導(dǎo)入組件
- 新建一個(gè)js文件糖埋，將代碼復(fù)制過(guò)去宣吱。我是放在coverLayer文件中。
- 導(dǎo)入該組件
import CoverLayer from '../../../widgets/coverLayer';
- 在需要彈框的界面外層添加該組件并添加ref引用（具體位置根據(jù)情況而定瞳别，防止遮擋）
render() {
return(
<View>
......
{/* 在合適位置添加組件 */}
<CoverLayer ref={ref => this.coverLayer = ref}/>
</view>
)
}
使用組件
該組件對(duì)外提供3個(gè)可自定義的屬性
coverLayerColor: PropTypes.string, //彈框背景顏色
coverLayerEvent: PropTypes.func, // 點(diǎn)擊背景后的回調(diào)
renderContent: PropTypes.func // 渲染彈框內(nèi)容的方法
提供2個(gè)控制顯示方法和一個(gè)控制隱藏方法
/*** 顯示彈框
* displayMode: 彈出方式（從底部/從中間彈出）
*/
show(displayMode);
/*** 顯示彈框
* renderContent: 內(nèi)容渲染方法
* coverLayerEvent: 點(diǎn)擊背景的回調(diào)方法
* displayMode: 彈出方式（從底部/從中間彈出）
*/
showWithOptions(renderContent,coverLayerEvent,displayMode);
/*** 隱藏彈框 ***/
hide();
使用方法有兩種征候，建議使用第二種方法
方法一：在組件中添加屬性，然后在合適的地方調(diào)用組件的show和hide方法控制顯示和隱藏祟敛。在一個(gè)界面多個(gè)彈框的情況下需要在renderContent方法中判斷顯示哪一個(gè)彈框疤坝，復(fù)雜度增加，所以建議使用第二種方法馆铁。
<CoverLayer ref={ref => this.coverLayer = ref}
renderContent={()=>{return <View></View>}}
coverLayerEvent={()=>console.log("點(diǎn)擊了背景")}
coverLayerColor="rgba(0,0,0,0.2)"
/>
// 顯示
showCoverLayer() {
this.coverLayer.show();
}
// 隱藏
hideCoverLayer() {
this.coverLayer.hide();
}
方法二：調(diào)用組件提供的showWithContent方法跑揉。調(diào)用該方法后會(huì)自動(dòng)顯示彈框，只需要在合適的位置調(diào)用hide隱藏方法
showPopupView() {
// 根據(jù)傳入的方法渲染并彈出
this.coverLayer.showWithContent(
()=> {
return (
<View style={{height:100,width:100,backgroundColor:"red"}}>
</View>
)
},
()=>this.coverLayer.hide(),
CoverLayer.popupMode.bottom
)
}
/*** 組件提供了一個(gè)類似枚舉的彈出方式選項(xiàng)popupMode埠巨，
* 可以直接使用導(dǎo)入的組件名.popupMode.center或組件名.popupMode.bottom控制彈出方式历谍。
* 當(dāng)然直接傳指定字符串也可以
*/
// 隱藏
hideCoverLayer() {
this.coverLayer.hide();
}
附上完整代碼
import React, { Component , PropTypes } from 'react';
import {
TouchableOpacity,
View,
Animated,
Dimensions
} from 'react-native';
const c_duration = 200;
const c_deviceHeight = Dimensions.get("window").height;
export default class CoverLayer extends Component {
static propTypes = {
coverLayerColor:PropTypes.string,
coverLayerEvent:PropTypes.func,
renderContent:PropTypes.func
};
static popupMode = {
center:"center",
bottom:"bottom"
};
// 構(gòu)造
constructor(props) {
super(props);
// 初始狀態(tài)
this.state = {
isShow:false,
opacityValue:new Animated.Value(0),
scaleValue:new Animated.Value(1.1),
bottom:new Animated.Value(-c_deviceHeight),
renderContent:this.props.renderContent,
coverLayerEvent:this.props.coverLayerEvent,
displayMode:null
};
this.showAnimated = null;
this.hideAnimated = null;
}
/**
* 顯示彈框(該方法是為了簡(jiǎn)化一個(gè)界面有多個(gè)彈框的情況)
* renderContent: func, 渲染彈框內(nèi)容的方法, 會(huì)覆蓋this.props.renderContent
* coverLayerEvent: func, 點(diǎn)擊背景觸發(fā)的事件, 會(huì)覆蓋this.props.coverLayerEvent
**/
async showWithContent(renderContent,coverLayerEvent,displayMode) {
if (this.state.isShow) {
this.hide(async ()=>{
await this.setState({
coverLayerEvent:coverLayerEvent,
renderContent:renderContent
});
this.show(displayMode);
})
} else {
await this.setState({
coverLayerEvent:coverLayerEvent,
renderContent:renderContent
});
this.show(displayMode);
}
}
// 顯示彈框
show(displayMode) {
this.setState({
displayMode:displayMode,
isShow:true
});
if (CoverLayer.popupMode.bottom == displayMode) {
this.showAnimated = this.showFromBottom;
this.hideAnimated = this.hideFromBottom;
} else {
this.showAnimated = this.showFromCenter;
this.hideAnimated = this.hideFromCenter;
}
Animated.parallel([
Animated.timing(this.state.opacityValue, {
toValue: 1,
duration: c_duration
}),
this.showAnimated()
]).start();
}
// 從中間彈出界面
showFromCenter() {
return (
Animated.timing(this.state.scaleValue, {
toValue: 1,
duration: c_duration
})
)
}
// 從底部彈出界面
showFromBottom() {
return (
Animated.timing(this.state.bottom, {
toValue: 0,
duration: c_duration
})
)
}
// 隱藏彈框
hide(callback) {
Animated.parallel([
Animated.timing(this.state.opacityValue, {
toValue: 0,
duration: c_duration
}),
this.hideAnimated()
]).start(async ()=> {
await this.setState({isShow: false});
callback && callback();
});
}
//從中間隱藏
hideFromCenter() {
return (
Animated.timing(this.state.scaleValue, {
toValue: 1.1,
duration: c_duration
})
)
}
// 從底部隱藏
hideFromBottom() {
return (
Animated.timing(this.state.bottom, {
toValue: -c_deviceHeight,
duration: c_duration
})
)
}
render() {
return(
this.state.isShow &&
<Animated.View style={{width:DEVICE_WIDTH,justifyContent:CoverLayer.popupMode.bottom == this.state.displayMode ? 'flex-end' : 'center',
alignItems:'center',backgroundColor:this.props.coverLayerColor ? this.props.coverLayerColor : 'rgba(0,0,0,0.4)',
position:'absolute',top:0,bottom:0,opacity: this.state.opacityValue}}>
<TouchableOpacity style={{width:DEVICE_WIDTH,justifyContent:'center',alignItems:'center',position:'absolute',top:0,bottom:0}}
activeOpacity={1}
onPress={()=>{this.state.coverLayerEvent && this.state.coverLayerEvent()}}/>
<Animated.View style={CoverLayer.popupMode.bottom == this.state.displayMode ? {bottom:this.state.bottom} : {transform: [{scale:this.state.scaleValue}]}}>
{this.state.renderContent && this.state.renderContent()}
</Animated.View>
</Animated.View>
);
}
}
