近期项目中用到一些弹框界面，经过几次优化后觉得挺好用，所以分享给大家。
效果
弹框.gif
思路
实现方法很简单，就做几个动画，没什么可说的。可以根据自己需求做一些调整。
导入组件
- 新建一个js文件，将代码复制过去。我是放在coverLayer文件中。
- 导入该组件
import CoverLayer from '../../../widgets/coverLayer';
- 在需要弹框的界面外层添加该组件并添加ref引用（具体位置根据情况而定，防止遮挡）
render() {
return(
<View>
......
{/* 在合适位置添加组件 */}
<CoverLayer ref={ref => this.coverLayer = ref}/>
</view>
)
}
使用组件
该组件对外提供3个可自定义的属性
coverLayerColor: PropTypes.string, //弹框背景颜色
coverLayerEvent: PropTypes.func, // 点击背景后的回调
renderContent: PropTypes.func // 渲染弹框内容的方法
提供2个控制显示方法和一个控制隐藏方法
/*** 显示弹框
* displayMode: 弹出方式（从底部/从中间弹出）
*/
show(displayMode);
/*** 显示弹框
* renderContent: 内容渲染方法
* coverLayerEvent: 点击背景的回调方法
* displayMode: 弹出方式（从底部/从中间弹出）
*/
showWithOptions(renderContent,coverLayerEvent,displayMode);
/*** 隐藏弹框 ***/
hide();
使用方法有两种，建议使用第二种方法
方法一：在组件中添加属性，然后在合适的地方调用组件的show和hide方法控制显示和隐藏。在一个界面多个弹框的情况下需要在renderContent方法中判断显示哪一个弹框，复杂度增加，所以建议使用第二种方法。
<CoverLayer ref={ref => this.coverLayer = ref}
renderContent={()=>{return <View></View>}}
coverLayerEvent={()=>console.log("点击了背景")}
coverLayerColor="rgba(0,0,0,0.2)"
/>
// 显示
showCoverLayer() {
this.coverLayer.show();
}
// 隐藏
hideCoverLayer() {
this.coverLayer.hide();
}
方法二：调用组件提供的showWithContent方法。调用该方法后会自动显示弹框，只需要在合适的位置调用hide隐藏方法
showPopupView() {
// 根据传入的方法渲染并弹出
this.coverLayer.showWithContent(
()=> {
return (
<View style={{height:100,width:100,backgroundColor:"red"}}>
</View>
)
},
()=>this.coverLayer.hide(),
CoverLayer.popupMode.bottom
)
}
/*** 组件提供了一个类似枚举的弹出方式选项popupMode，
* 可以直接使用导入的组件名.popupMode.center或组件名.popupMode.bottom控制弹出方式。
* 当然直接传指定字符串也可以
*/
// 隐藏
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"
};
// 构造
constructor(props) {
super(props);
// 初始状态
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;
}
/**
* 显示弹框(该方法是为了简化一个界面有多个弹框的情况)
* renderContent: func, 渲染弹框内容的方法, 会覆盖this.props.renderContent
* coverLayerEvent: func, 点击背景触发的事件, 会覆盖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>
);
}
}
网友评论