react-native仿原生弹窗|RN自定义弹窗组件

xiaoyan2015 · 发表于 2019-8-9 11:29:29

本帖最后由 xiaoyan2015 于 2019-8-9 11:30 编辑

最近疯狂的迷上了react原生开发，捣鼓了好几天，采坑了不少，想着进一步提升下技术，就开发了个RN自定义弹窗组件rnPop.js
rnPop是一个基于React/React-Native技术高自定义Modal模态框，功能效果有些类似android、ios、微信弹窗效果。结合了原生Modal及react能力，使得弹窗高度耦合自定义参数，代码结构优雅、简洁。

预览图：

目录结构：

调用方式：

// 引入rnPop.js组件
import RNPop from '../utils/rnPop/rnPop.js'
render() {
return (
<View style={styles.container}>
...
{/* 引入弹窗模板 */}
<RNPop ref="rnPop" />
</View>
)
}
显示：this.refs.rnPop.show({...options});
隐藏：this.refs.rnPop.hide();

复制代码

如果觉得上面调用方式不够优雅，也可以通过react全局变量控制，如使用rnPop({…options}) 、 rnPop.close()方式进行弹窗调用

/**************************
* 实例化弹窗接口
*/
const Popup = (args) => {
RNPop.show(args)
}
Popup.close = () => {
RNPop.close()
}
global.rnPop = Popup

复制代码

//msg提示
handlePress01 = ()=> {
rnPop({
content: 'msg消息提示框（5s后窗口关闭）',
shade: true,
shadeClose: false,
time: 5,
xtime: true,
anim: 'fadeIn',
});
}
//msg提示(黑色背景)
handlePress02 = ()=> {
rnPop({
content: '自定义弹窗背景',
shade: false,
style: {backgroundColor: 'rgba(17,17,17,.7)', borderRadius: 6},
contentStyle: {color: '#fff', padding: 10},
time: 2
});
}

复制代码

同时还支持对传入content参数进行自定义模板 content: string | object

// 自定义调用
handlePressAA = () => {
rnPop({
content: (
<DefineCp />
// <View style={{alignItems: 'center', justifyContent: 'center'}}>
// <Image style={{height: 200, width: 200}} source={require('../assets/qrcode.jpg')} />
// <Text style={{color: '#999'}}>长按或扫一扫二维码，加我好友</Text>
// <View><Text onPress={rnPop.close} style={{backgroundColor: '#61dafb', borderRadius: 20, color: '#fff', marginTop: 15, marginBottom: 10, paddingVertical: 5, paddingHorizontal: 50}}>保存二维码</Text></View>
// </View>
),
anim: 'bottom'
});
}
// 自定义模板
const DefineCp = () => {
return (
<View style={{alignItems: 'center', justifyContent: 'center'}}>
<Image style={{height: 200, width: 200}} source={require('../assets/qrcode.jpg')} />
<Text style={{color: '#999'}}>长按或扫一扫二维码，加我好友</Text>
<View><Text onPress={rnPop.close} style={{backgroundColor: '#61dafb', borderRadius: 20, color: '#fff', marginTop: 15, marginBottom: 10, paddingVertical: 5, paddingHorizontal: 50}}>保存二维码</Text></View>
</View>
)
}