美文网首页
RN-底部弹窗

RN-底部弹窗

作者: 以德扶人 | 来源:发表于2017-04-14 15:52 被阅读778次

介绍一款弹窗方法:

导入

import ActionSheet from 'react-native-actionsheet'; //弹窗

头部设置参数

const buttons = ['取消', '扫一扫'];
const CANCEL_INDEX = 0;
const DESTRUCTIVE_INDEX = 1;

渲染render设置REF

<ActionSheet
                            ref={(o) => this.ActionSheet = o}
                            title="选择添加好友"
                            options={buttons}
                            cancelButtonIndex={CANCEL_INDEX}
                            destructiveButtonIndex={DESTRUCTIVE_INDEX}
                            onPress={this._handlePress.bind(this)}
                        />

使用方法

在要点击的事件地方放入方法:

this.ActionSheet.show();

设置各选项的事件和逻辑

// 头部弹窗方法
    _handlePress(index) {
        if(index==1){  //扫一扫
            alert('1');
        }else if(index==2){
            //alert('2');
        }
    }

相关文章

  • RN-底部弹窗

    介绍一款弹窗方法: 导入 import ActionSheet from 'react-native-action...

  • PopView

    底部弹窗 中间弹窗

  • flutter 自定义弹窗

    仿苹果底部弹窗模态框 自定义弹窗 使用

  • 底部弹窗

    在项目中经常会用到底部弹出框或者其他地方的弹出框,今天用到了 Dialog 来实现(以前都是用 pw 实现的),在...

  • 移动端禁止弹出层背景滚动

    场景:背景内容超出屏幕高度,需滚动展示;底部弹窗内容超出底部容器高度,需在容器内滚动展示;当底部弹窗打开,需阻止背...

  • UIAlertView 警示框 以及 UIActionSheet

    UIAlertView 警示框 UIActionSheet 底部弹窗

  • 安卓Util

    SharedPreferenceUtil BottomDialogUtil底部弹窗 软键盘切换

  • iOS开发-底部弹窗视图

    开发过程中底部弹窗视图在很多处会被用到,所以今天写一个简易的底部弹窗视图 1.先分析都有哪些控件底部蒙层 mask...

  • BottomSheet底部弹窗

    好了, 通过之前几篇笔记, 对于CoordinatorLayout和AppbarLayout等有了个大概的认识, ...

  • 底部弹窗dialog

    1. 自定义BottomPayDialog 2. 在代码中使用 3. 弹出框布局文件 4. 自定义style

网友评论

      本文标题:RN-底部弹窗

      本文链接:https://www.haomeiwen.com/subject/dlowattx.html