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

来源：互联网发布：linux系统shell 编辑：程序博客网时间：2024/06/05 15:36

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'; //自定义弹框//自定义Alertglobal.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('标题','文本内容'); 就可以直接拿来使用了.在其他界面也是这样,非常方便.

如有问题,欢迎交流.

阅读全文

0 0