Skip to content

Latest commit

 

History

History
134 lines (115 loc) · 3.72 KB

README.md

File metadata and controls

134 lines (115 loc) · 3.72 KB
Raw

react-native-popupwindow npm version

Android used PopupWindow implementation of the iOS-style dialog box

简体中文

Method

showPopupWindow(options,callback)

options : must be not null

  • windowColor : background color,default #50000000
  • style : show in activity center or bottom,default 0
  • 0 : show in center
  • 1 : show in bottom
  • margin : the distance from the screen
  • title : dialog title,default hide,only show when set value and style=0
  • titleTextSize : dialog title text size,default 17sp,only show when set value and style=0
  • titleTextColor : dialog title text color,only show when set value and style=0
  • single : only show when set value and style=0,default false
  • false : has two button(positive and negative)
  • true : single button(only has positive)
  • message : dialog message
  • messageTextSize : dialog message text size
  • messageTextColor : dialog message text color
  • positive : when style=0 and single=false,is left button、when single=true,only has this button; when style=1,is above button
  • positiveTextSize : positive button text size
  • positiveTextColor : positive button text color
  • negative : when style=0 and single=false,is right button、when single=true,this button will be hidden; when style=1,is below button
  • negativeTextSize : negative button text size
  • negativeTextColor : negative button text color

callback(err,action,button)

  • err : err message
  • action : return "buttonClicked"
  • button : return "positive" or "negative"

Install And Use

Npm Install

$ npm install --save react-native-popupwindow

Add Link

$ react-native link react-native-popupwindow

Use

import React, { Component } from 'react';

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ToastAndroid
} from 'react-native';

import MyPop from 'react-native-popupwindow';

let options = {
};

class PopupWindow extends Component {
  center(){
    options.style = 0;
    MyPop.showPopupWindow(options,(err,action,button) =>{
          if(err){
            ToastAndroid.show(err,ToastAndroid.SHORT);
          }else{
            if(action === 'buttonClicked'){
                if(button === 'positive'){
                  ToastAndroid.show('click ok',ToastAndroid.SHORT);
                }else if(button === 'negative'){
                  ToastAndroid.show('click cancel',ToastAndroid.SHORT);
                }
            }
          }
      });
  }
  bottom(){
    options.style = 1;
    MyPop.showPopupWindow(options,(err,action,button) =>{
          if(err){
            ToastAndroid.show(err,ToastAndroid.SHORT);
          }else{
            if(action === 'buttonClicked'){
                if(button === 'positive'){
                  ToastAndroid.show('click ok',ToastAndroid.SHORT);
                }else if(button === 'negative'){
                  ToastAndroid.show('click cancel',ToastAndroid.SHORT);
                }
            }
          }
      });
  }
  render() {
    return (
        <View style={styles.container}>
          <Text style={styles.welcome} onPress={this.center}>
              show in center
           </Text>
          <Text style={styles.welcome} onPress={this.bottom}>
              show in bottom
          </Text>
        </View>
    );
  }
}

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

AppRegistry.registerComponent('PopupWindow', () => PopupWindow);

Run Renderings

rendering