React native 自定义弹窗(android使用原生ios弹窗)

android端运行效果图(ios同样适用):



1.自定义弹窗源码:

import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Modal,
TouchableOpacity,
} from 'react-native';

export default class RNAlertView extends Component {

//定义静态的属性,可通过传参数的方式直接传送,那在本组件中就需要使用this.props.alertTitle等写法
static propTypes = {
alertTitle: "文本标题",  //自定义文本标题
alertContent: "文本内容",  //自定义文本内容
cancleBtnTitle: "取消",  //自定义取消按钮文本
comformBtnTitle: "确定",  //自定义取消确定文本
}

constructor(props){
super(props);

this.state = ({
isShow:false,
})
}

render() {

if (!this.state.isShow) {
return null;
}else {
return (
<Modal
visible={this.state.isShow}
//显示是的动画默认none
//从下面向上滑动slide
//慢慢显示fade
animationType={'fade'}
//是否透明默认是不透明 false
transparent={true}
//关闭时调用
onRequestClose={() => {}}
>
<View style = {styles.container}>
<View style = {styles.AlertView}>
<View style = {{justifyContent:'center', alignItems:'center', height:30}}><Text style = {{fontSize:18, fontWeight:'900'}}>{this.props.alertTitle}</Text></View>
<View style = {{justifyContent:'center', alignItems:'center', height:50}}><Text style = {{fontSize:16, color:'grey'}}>{this.props.alertContent}</Text></View>
<View style = {{height:1, backgroundColor:'lightgrey'}}></View>

<View style = {{flexDirection:'row', height:50}}>
<TouchableOpacity  onPress = {() => {this.dissmiss(0.5);this.dissmiss(); this.props.comformClik ? this.props.comformClik() : null} } style = {{flex:0.49, justifyContent:'center', alignItems:'center'}}>
<Text style = {{fontSize:18, color:'red'}}>确定</Text>
</TouchableOpacity>

<View style = {{height:50, backgroundColor:'lightgrey', width:1}}></View>

<TouchableOpacity  onPress = {() => {this.dissmiss(0.5);this.dissmiss(); this.props.dissmissClick? this.props.dissmissClick() : null} } style = {{flex:0.49, justifyContent:'center', alignItems:'center'}}>
<Text style = {{fontSize:18, color:'blue'}}>取消</Text>
</TouchableOpacity>

</View>
</View>
</View>
</Modal>
)
};

}

//显示
show(title,content){
this.setState({
isShow:true,  //显示弹窗
alertTitle:title,
alertContent:content,
})
}

//消失弹窗
dissmiss = (delay) => {
// 延时0.5,据说体验比较好
let duration = 0;

if (delay == null || delay <= 0){
duration = 3;
}else {
duration = delay;
}

this.timer = setTimeout(() => {
this.setState({
isShow:false,
});
this.timer && clearTimeout(this.timer);
},duration*1000);
}

}

const styles = StyleSheet.create({

container:{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
justifyContent: 'center',
flex:1,
backgroundColor:'rgba(0,0,0,0.1)',
},

AlertView:{
backgroundColor:'white',
borderRadius:10,
borderWidth:1,
height:130,
marginLeft:30,
marginRight:30,
borderColor:'lightgrey',
}
})

2.使用方法:

为了在项目中全局使用,建议配置在Global中,如下:

1>Global文件源码:

import React, { Component } from 'react';
import RNAlertView from './RNAlertView'; //自定义弹框

//自定义Alert
global.RNAlert = RNAlertView;

2>在程序入口加入Global文件:

在index.js文件中加入:

import { AppRegistry } from 'react-native';
import App from './App';
import './Global';
AppRegistry.registerComponent('GlobalApp', () => App);

3>在代码中引用:

import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Alert
} from 'react-native';

export default class App extends Component<{}> {
render() {
return (
<View style={styles.container}>

<RNAlert ref = 'RNAlert' comformBtnTitle = {'确定'}  cancleBtnTitle = {'取消'}
alertTitle={'文本标题'} alertContent={'content'}comformClik = {() => {this._sure()}}
dissmissClick = {() => {this._cancel()}}
/>

<Text style={styles.welcome} onPress={()=> this._show()}>
点我->弹出框
</Text>
</View>
);
}

_show =()=>{
this.refs.RNAlert && this.refs.RNAlert.show('标题','文本内容');
}

_sure=()=>{

Alert.alert('点击了确定')

}

_cancel=()=>{

Alert.alert('点击了取消')

}

}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});

总结:

这样配置以后,以后就只需要在render里面写进去,再通过 this.refs.RNAlert && this.refs.RNAlert.show('标题','文本内容'); 就可以直接拿来使用了.在其他界面也是这样,非常方便.

如有问题,欢迎交流.