Package Exports

react-native-dialogs-master

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-dialogs-master) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

CommonDialog

This is a combination of the pop-up box confirmation react-native components for Android and Ios,you can customize the style and parameters for the component

react-native-dialogs-master

A react-native picker/selector component for both Android & iOS.

Features

Pure JS.
Pop up box and confirm the box together .
Custom pop-up box
Compatible with both iOS and Android.
Highly customizable.(You can change the style you want)
Controllable with API by code. (show/hide/valueChange)
Flexible change of content

Installation

npm i react-native-dialogs-master --save

Usage

Import this module:

  import CommonDialog from 'react-native-dialogs-master';

code

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  ScrollView,
  TouchableHighlight
} from 'react-native';
import TimerMixin from 'react-timer-mixin'; 
import CommonDialog from './mineUI/product/commonDialog';
export default class DialogDemo extends Component { 
  constructor(props){
     super(props); 
  }
  funAlert(){
      var options={
         thide:true,
         innersWidth:300,
         innersHeight:150,	
         buttons:[
                     {
                        txt:'知道了'
                     }
                 ]			 
      }
     this.refs.dAlert.show(options) 
  }
  funConfirm(){
     var options={
         thide:true, /*不显示头部标题*/
         messText:'投资前需开通第三方存管账户',
         buttons:[
             {
                txt:'取消'
             },
             {
                txt:'确定'
             }
         ]				 
      } 
     this.refs.dConfirm.show(options) 
  }
  funcustomConfirm(){
     var options={
         title:'购买', /*不显示头部标题*/
         headStyle:{backgroundColor:'#ff6600',color:'#ffffff',fontSize:24},
         messText:'投资前需开通第三方存管账户',
         buttons:[
             {
                txt:'暂不投资',
                btnStyle:{backgroundColor:'transparent'},
                txtStyle:{color:'#ff6600'},
                onpress:this.cancels.bind(this)
             },
             {
                txt:'立即投资',
                btnStyle:{backgroundColor:'#ff6600'},
                txtStyle:{color:'#ffffff'}, 
                onpress:this.cok.bind(this)
             }
         ]		 
      } 
     this.refs.dcustomConfirm.show(options) 	  
  }
  cok(){
    alert("你点击了确定按钮!")  
  }
  cancels(){
    this.refs.dokAlert.show({
        headStyle:{backgroundColor:'#ff6600',color:'#ffffff',fontSize:24},
        messText:'确定取消投资吗？',
        buttons:[{txt:'确定',btnStyle:{backgroundColor:'transparent'},txtStyle:{color:'#ff6600'}}],
        innersWidth:300,
        innersHeight:150,
        }) 
  }
  funAutofade(){
      var options={
        animationType:'none',
        title:'自定义组件',
        clickScreen:false		
      }
     this.refs.dAutofade.show(options) 
  }
  hides(){
      this.refs.dAutofade.hide();
  }
  render() {
     
    return (
       <View style={styles.container}>
          <TouchableHighlight style={[styles.comBtnBtnView,{width:100}]} underlayColor='transparent' 
                     onPress={this.funAlert.bind(this)}>  
            <Text style={[styles.comBtnText]}>alert</Text>  
          </TouchableHighlight>
          <TouchableHighlight style={[styles.comBtnBtnView,{width:100}]} underlayColor='transparent' 
                onPress={this.funConfirm.bind(this)}>  
            <Text style={[styles.comBtnText]}>confirm</Text>  
          </TouchableHighlight>
          <TouchableHighlight style={[styles.comBtnBtnView,{width:100}]} underlayColor='transparent' 
                onPress={this.funcustomConfirm.bind(this)}>  
            <Text style={[styles.comBtnText]}>customconfirm</Text>  
          </TouchableHighlight>
          <TouchableHighlight style={[styles.comBtnBtnView,{width:100}]} underlayColor='transparent' 
                 onPress={this.funAutofade.bind(this)}>  
            <Text style={[styles.comBtnText]}>Autofade</Text>  
          </TouchableHighlight>
          <CommonDialog types={'alert'} components={<DefineCon/>}   ref="dAlert" />
          <CommonDialog types={'confirm'} ref="dConfirm" />
          <CommonDialog  ref="dokAlert" />
          <CommonDialog  ref="dcustomConfirm" />
          <CommonDialog  ref="dAutofade"  components={<DefineCon2 onclick={this.hides.bind(this)}/>}  />
       </View>
    );
  }
}
class DefineCon2 extends Component{
    mixins = [TimerMixin];
    constructor(props){
        super(props);
        this.timer=""; 
        this.state={
            times:3
        }
    }
    componentDidMount() {
        this.timer=setInterval(  
            () => {  
            
              if(this.state.times<=1){
                clearInterval(this.timer)
                this.props.onclick()				
              }else{
                  this.setState({times:this.state.times-1})
              }  
            },  
            1000 
          );
    }
     componentWillUnmount() {
         clearInterval(this.timer);
        
    }
    
    render(){
        return(
          <View style={[styles.conMid]}>
              <View style={{flex:1,flexDirection:'column',padding:15,alignItems:'center',justifyContent:'center'}}>
                <Text style={{flex:1,color:'#000000',textAlignVertical:'center'}}>支付成功,订单已提交审核！</Text>
                <Text style={{flex:1,fontSize:12,textAlignVertical:'center'}}>
                      即将关闭此窗口（<Text style={{color:'#ff0000'}}>{this.state.times}秒</Text>）
                 </Text>
              </View> 
          </View>
        )
    }
}
class DefineCon extends Component{
    constructor(props){
        super(props);
    }
    render(){
        return(
          <View style={[styles.conMid]}>
             <Image source={require('./mineUI/product/imgs/alert.png')} style={{width:32,height:32}} />
             <Text style={[styles.tmid,{width:120,paddingLeft:15}]}>我是自定义内容</Text>
          </View>
        )
    }
}

Demo

Customization options

'animateType': Change pop up block display animation ('fade','normal','slide') - The animationType prop controls how the modal animates. - slide: slides in from the bottom -fade: fades into view -none: appears without an animation
'thide'：(true|false) show or hide header
'title': Custom header text
'headStyle': Change the style of the dialogs header
'innersWidth': Change the width of the dialogs
'innersHeight':Change the height of the dialogs
'clickScreen': (true|false) Transparent area can click
'messText': Prompt text
'buttons':Button group object

      buttons:[
             {
                txt:'button text',     ---string
                btnStyle:{backgroundColor:'transparent'},  button style---object
                txtStyle:{color:'#ff6600'},    button text style           ---object
                onpress:this.cancels.bind(this) button click event          ---function
             }
             ...
            ]

Props

'components': Custom middle context component

Methods

Method	Description
`show(options)`	Show dialogs （ use the react-native Modal component to always be at the top）
`hide()`	Hide dialogs