Alert

Alert 弹窗

Install

  1. npm  install beeshell

Usage

  1. import { Alert } from 'beeshell';
  1. import { Alert } from 'beeshell';
  3. // 示例1: 普通
  4. Alert.alert(
  5.     '梯田里添加卡利久里',
  6.     '梯田里添加卡利久里梯田里添加卡利久里梯田里添加卡利久里梯田里添加卡利久里梯田里添加卡利久里梯田里添加卡利久里',
  7.     [{ text: '取消' }, { text: '确认' }],
  8. );
  10. // 示例2: 自定义title和message组件，弱化确认按钮
  11. Alert.alert(
  12.     <View><Text>就是不想用默认的样式</Text></View>,
  13.     <View><Text>就是不想用默认的样式，或者需要自定义内容：非文字，多段文字等等</Text></View>,
  14.     [{ text: '取消' }, { text: '确认', type: 'dark'}],
  15. );
  17. // 示例3: 一个按钮
  18. Alert.alert(
  19.     '标题',
  20.     '一个按钮一个按钮一个按钮一个按钮一个按钮一个按钮一个按钮',
  21.     [{
  22.         text: '一个按钮操作',
  23.     }],
  24. );
  26. // 示例4: 点击蒙层弹窗消失
  27. Alert.alert(
  28.     '',
  29.     '点击蒙层弹窗消失，cancelable=true',
  30.     [{
  31.         text: '取消',
  32.     }, {
  33.         text: '确认',
  34.     }],
  35.     { cancelable: true },
  36. );
  38. // 示例5: onPress promise 
  39. handleChangeText(text) {
  40.     this.setState({ text });
  41. }
  43. // TextInput 不要设置 value参数,不然会导致无法输入新的字符
  45. Alert.alert(
  46.     '请输入你的反馈',
  47.     <TextInput
  48.         style={{ height: 100, backgroundColor: '#f0f0f0', padding: 15 }}
  49.         onChangeText={this.handleChangeText}
  50.         placeholder={this.state.placeHolder}
  51.         multiline
  52.         numberOfLines={3}
  53.     />,
  54.     [
  55.         {
  56.             text: '取消',
  57.         }, 
  58.         {
  59.             text: '提交',
  60.             onPress: () => new Promise((resolve, reject) => {
  61.                 // 这里可以判断值也可以调用异步判断
  62.                 if (this.state.text) {
  63.                     resolve();
  64.                 } else {
  65.                     reject();
  66.                 }
  67.             }),
  68.         }
  69.     ],
  70.     { cancelable: true },
  71. );

API

Alert.alert(title, message, buttons, options);

参数 说明 类型 默认值 备注
title 标题 string 或 element null
message 弹框的主体 string 或 element null
buttons 按钮 array [{ text, type, onPress}] 一个按钮type默认是’dark’，两个按钮分别默认是’default’和’primary’
options 配置项 object {cancelable: false}, cancelable控制点击蒙层是否关闭弹框，默认是false

注意

  • button 按钮实体, { text, type, onPress} 中的 onPress 的返回值如果是一个 ES6 Promise 对象, 只有当你是resolve的时候,组件才会帮你关掉Alert, 不调用或reject的时候什么都不会发生. 详见示例5
  • 如果message 里有TextInput, 请不要设置 value参数,不然会导致无法输入新的字符

Alert.close(); // 关闭弹窗

License

beeshell is released under the MIT license.