react-native-popup-dialog

git地址
https://github.com/jacklam718/react-native-popup-dialog

使用例子：

import PopupDialog, {DialogButton, FadeAnimation, ScaleAnimation, SlideAnimation,} from 'react-native-popup-dialog';
import DialogTitle from "react-native-popup-dialog/src/components/DialogTitle";

const slideAnimation = new SlideAnimation({slideFrom: 'bottom'});
const scaleAnimation = new ScaleAnimation();
const fadeAnimation = new FadeAnimation({animationDuration: 150});

 render() {

        return (
            <View style={{flex: 1,}}>
                <View>

                    <DialogButton text='Show - Default Aanimation'
                                  onPress={this.showFadeAanimatinDialog}/>

                    <DialogButton text='Show - Scale Animation'
                                  onPress={this.showScaleAnimationDialog}/>

                    <DialogButton text='Show - Slide Animation'
                                  onPress={this.showSlideAnimationDialog}/>
                </View>
                {/*<View style={{ backgroundColor: ColorLineRed, marginStart: 20, marginEnd: 20}}>*/}

                <PopupDialog
                    width={deviceWidth - 40}
                    style={{backgroundColor: ColorLineRed, marginStart: 20, marginEnd: 20}}
                    ref={(fadeAnimationDialog) => {
                        this.fadeAnimationDialog = fadeAnimationDialog;
                    }}
                    dialogTitle={<DialogTitle title="Popup Dialog - Default Animation"/>}>
                    <View style={[styles.dialogContentView]}>
                        <TouchableOpacity
                            onPress={() => {
                                this.fadeAnimationDialog.dismiss()
                            }}>
                            <Text>Default Animation</Text>
                        </TouchableOpacity>

                    </View>
                </PopupDialog>
                {/*</View>*/}
                <PopupDialog
                    ref={(popupDialog) => {
                        this.scaleAnimationDialog = popupDialog;
                    }}
                    dialogAnimation={scaleAnimation}
                    dialogTitle={<DialogTitle title="Popup Dialog - Scale Animation"/>}
                    actions={[<DialogButton
                        text='DISMISS'
                        onPress={() => {
                            this.scaleAnimationDialog.dismiss();
                        }}
                        key='button-1'
                    />,
                    ]}>
                    <View style={styles.dialogContentView}>
                        <DialogButton
                            text="Show Dialog - Default Animation"
                            onPress={this.showFadeAnimationDialog}
                        />
                    </View>
                </PopupDialog>

                <PopupDialog
                    dialogTitle={<DialogTitle title="Popup Dialog - Slide Animation"/>}
                    ref={(popupDialog) => {
                        this.slideAnimationDialog = popupDialog;
                    }}
                    dialogAnimation={slideAnimation}>

                    <View style={styles.dialogContentView}>
                        <Text>Slide Animation</Text>
                    </View>
                </PopupDialog>
            </View>
        )
    }


    showFadeAanimatinDialog = () => {
        this.fadeAnimationDialog.show();
    };


    showScaleAnimationDialog = () => {
        this.scaleAnimationDialog.show();
    }


    showSlideAnimationDialog = () => {
        this.slideAnimationDialog.show();
    }

    popupDiscuss = () => {
        console.log('popup', 'popupDiscuss');
        this.fadeAnimationDialog.dismiss();
    }

效果图：

clipboard.png clipboard2.png