ReactNative对话框的实现
ReactNative官方的Modal在使用了预加载JS和RootView优化功能之后,就不能弹Modal窗口,而Modal窗口弹出来的前提是需要当前的Context上下文,而预加载初始化的相关工作传入的context要么是application或其它activity的上下文。
在这种情况下,我们需要实现弹窗效果就需要其它方案来解决,那么这里就是解决方案;
一、ReactNaitve JavaScript实现Dialog源码
'use strict'
import React, {Component} from 'react';
import {
StyleSheet,
View,
StatusBar,
Dimensions, TouchableWithoutFeedback
} from 'react-native';
const {width, height} = Dimensions.get('window');
const [left, top] = [0, 0];
export default class Dialog extends React.Component {
constructor(props) {
super(props);
this.state = {
isHidden: this.props.isHidden
};
this.position = this.props.position || "center";
this.outSideDisappear = this.props.outSideDisappear || true;
this.height = this.props.height || 0;
this.contentStyle = this.props.contentStyle;
this.margin = this.props.margin || 0;
}
/**
* 隐藏对话框
*/
dismiss = () => {
this.setState({
isHidden: true
});
}
/**
* 显示对话框
*/
show = () => {
this.setState({
isHidden: false
});
}
/**
* 点击透明区域是否消失对话框;
*/
onDialogOutSideClicked = () => {
if (this.props.outSideDisappear) {
this.dismiss();
}
}
render() {
//计算屏的高度
let screenHeight = height - StatusBar.currentHeight;
//计算对话框内容区域top的起点位置;
let top = this.position == "center" ? (screenHeight - this.height) / 2
: this.position == "top" ? this.margin
:(screenHeight - this.height - this.margin ) ;
return this.state.isHidden ? <View/> : (
<View style={styles.dialog_container}>
{
//对话框半透明背景
}
<TouchableWithoutFeedback style={styles.dialog_mask}
onPress={this.onDialogOutSideClicked}>
<View style={styles.dialog_mask}/>
</TouchableWithoutFeedback>
{
//对话内容区域视图渲染
}
<View style={[
styles.dialog_center,
this.props.contentStyle,
{
height: this.height,
left:this.margin,
width:width - 2 * this.margin,
top: top }] }>
{this.props.children}
</View>
</View>);
}
}
const styles = StyleSheet.create({
dialog_container: {
position: "absolute",
width: width,
height: height,
left: left,
top: top,
},
dialog_mask: {
justifyContent: "center",
backgroundColor: "#383838",
opacity: 0.8,
position: "absolute",
width: width,
height: height,
left: left,
top: top,
},
dialog_center: {
position: "absolute",
width: width,
backgroundColor: "#FFFFFF",
justifyContent: "center",
alignSelf: "center",
left: left,
}
});
二、Dialog的使用说明
导入Dialog.js文件后,在你的界面render方法中加入如下代码.
Dialog定义了如下基本属性
<Dialog
ref = { component=>{ this.dialog = component; } }
outSideDisappear = { true } //是否点击半透明区域让对话框消失;
contentStyle = { styles.dialog }
position = "center" // 对话框内容区域布局对齐方式:"center","top","bottom", 默认值是:"center"
height = { PixelRatio.getPixelSizeForLayoutSize(50) }
isHidden = { this.state.isDialogShow } // 对话框默认是否隐藏,默认为false
isStatusBarHidden = { true } //状态栏是否处于显示状态,默认为false;
margin = { PixelRatio.getPixelSizeForLayoutSize(5) }>
<Text style={ styles.title }>温馨提示</Text>
<Text style={ styles.content }>确定要购买?</Text>
<View style = { styles.dialogContent }>
<Text style={ styles.cancel }>取消</Text>
<Text style={ styles.ok }>确定</Text>
</View>
</Dialog>
...
const styles = StyleSheet.create({
dialog : {
justifyContent:"flex-start",
backgroundColor: "#ffffff",
borderRadius:5,
},
title:{
color:"#000000",
alignSelf:"center",
fontSize:18,
height:25,
marginTop:10,},
content:{
color:"#000000",
alignSelf:"flex-start",
height:70,
fontSize:17,
marginLeft:50,
textAlignVertical:"center"},
cancel:{
color:"#000000",
alignSelf:"center",
fontSize:18,
height:25,
marginTop:10,
marginRight:50},
ok:{
color:"#000000",
alignSelf:"center",
fontSize:18,
height:25,
marginTop:10,
marginLeft:50},
dialogContent:{
flexDirection:"row",
justifyContent:"center",
alignItems:"center"}
});
效果图如下
image.png
网友评论