专栏首页码生ReactNative loading toast hint alert alertSheet

ReactNative loading toast hint alert alertSheet

组件之 react-native-shenma-hint

  • loading
  • 文本提示框
  • loading + 文本提示框
  • 2 秒自动消失
  • 黑色背景,标题和副标题
  • 可设置是否可以穿透

关于 ReactNative Alert AlertSheet Hint 三个库的改进

库引入

"dependencies": {
    "react-native-shenma-hint": "git+http://gitlab.shenmajr.com/shenma-app-rn-common/react-native-shenma-hint.git",
    "react-native-shenma-alertsheet": "git+http://gitlab.shenmajr.com/shenma-app-rn-common/react-native-shenma-alertsheet.git",
    "react-native-shenma-alert": "git+http://gitlab.shenmajr.com/shenma-app-rn-common/react-native-shenma-alert.git",
      },

用法

alert 集成与使用方法

  • 引入 UI 视图
{this.alertView()}
  • 调用
this.alert()

alertSheet 集成与使用方法

  • 引入 UI 视图
{this.alertSheetView()}
  • 调用
this.alertSheet()

hint 集成与使用方法

  • 引入 UI 视图
{this.hintView()}
  • 调用
this.makeHint()
this.hiddenActivity()
this.makeActivity()

demo

alertDemo() {
    this.alert({
        title: 'hello',
        message: 'message,'
    })
}

render() {
    return (
        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center',}}>

            <!-- 调用 -->
            <TouchableOpacity onPress={this.alertDemo.bind(this)}>
                <Text>alert</Text>
            </TouchableOpacity>
            
            <!-- 引入 UI 视图 -->
            {this.hintView()}
            {this.alertView()}
            {this.alertSheetView()}
        </View>
    );
}

优化

  1. 集成代码由原来将近 100 行代码,缩减到 3 行
  2. 1 的优化下,每个界面集成拥有其自己的 alert alertSheet hint(集成方便)
  3. 2 的优化下,makeHint 不再是全局的遮罩,不会因为遮罩而导致整个APP无法点击、页面无法返回的问题
  4. 2 的优化下,解决了由于 Modal 导致的 makeHint alert alertSheet 无法使用的问题
  5. 调用方便, 直接 this.alert、this.alertSheet、this.makeHint 即可调用
  6. 取消了全局 SMAlertManager SMAlertSheetManager 等全局单例

目前公司内部在使用,待完全整理后发出。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • django Authorization token

    原因:没有导入rest authon: 'rest_framework.authtoken', 解决方法:在 settings 里面 INSTALLED_AP...

    onety码生
  • react-navigation 监听页面显隐(viewDidAppear viewDidDisappear)

    我们经常遇到的需求就是,当某个界面出现的时候,就刷新一下此界面的数据 保证用户的数据处于一种相对同步的情况

    onety码生
  • React Native iOS 剖析 WebView && 解决 Error loading page Domain: WebKitErrorDomain Error Code: 101 The U

    今天在对接一个网页时加载网页总是碰到 Error loading page Domain: WebKitErrorDomain Error Code: 101...

    onety码生
  • mpvue开发小程序过程中遇到的问题

    原生小程序开发方式与vue有些类似,所以用过vue的前端er会很容易上手。但是原生的开发体验实在糟糕,在前端组件化的今天用原生开发组件显得很无力。对于习惯vue...

    javascript.shop
  • (四十六)c#Winform自定义控件-水波进度条

    GitHub:https://github.com/kwwwvagaa/NetWinformControl

    冰封一夏
  • Joomla V3.7.0 核心组件SQL注入漏洞分析

    风流
  • 读Zepto源码之属性操作

    这篇依然是跟 dom 相关的方法,侧重点是操作属性的方法。 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版...

    对角另一面
  • 聊聊rocketmq的HAClient

    rocketmq-all-4.6.0-source-release/store/src/main/java/org/apache/rocketmq/store/...

    codecraft
  • 聊聊rocketmq的HAClient

    rocketmq-all-4.6.0-source-release/store/src/main/java/org/apache/rocketmq/store/...

    codecraft
  • 使用react render props实现倒计时

    react的组件模式可以观看Michael Chan的演讲视频,平时大家常听到的react模式也是HOC, HOC的使用场景很多,譬如react-redu...

    IMWeb前端团队

扫码关注云+社区

领取腾讯云代金券