# React-Native-UIAlert

**Repository Path**: kkrn/React-Native-UIAlert

## Basic Information

- **Project Name**: React-Native-UIAlert
- **Description**: react native 自定义弹窗
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-25
- **Last Updated**: 2025-06-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React-Native-UIAlert
![案例](https://coding.net/u/yks/p/React-Native-UIAlert/git/blob/master/image/Simulator%20Screen%20Shot%20-%20iPhone%20X%20-%202019-10-28%20at%2011.02.56.png)
![案例](https://coding.net/u/yks/p/React-Native-UIAlert/git/blob/master/image/Simulator%20Screen%20Shot%20-%20iPhone%20X%20-%202019-10-28%20at%2011.13.28.png)
## Props属性说明
| name                | type        | Default               | Extra
| ---------           |:-----:      |:-----:                | :----:
| myData              | Dictionary  | {}                    | 控制显示内容
| id                  | String      | nul                   | 按钮事件回调时区分那个按钮
| text                | String      | ""                    | 提示窗口的内容文案
| buttons             | Array       | []                    | 两个维度的按钮多行多列:`[[],[],[]]`,多行单列:`[{},{},{}]`
| clickBtn            | Function    | null                  | 回调方法

## 使用说明
### 安装
`npm install react-native-uialert --save`
### 引入
`import UIAlert from 'react-native-uialert'`
### Methods
* `showV()`//显示(默认是隐藏的)
* `heiV()`//隐藏

```js
    //contentText 主体文案的style
	<UIAlert ref = "UIAlert" contentText = {{textAlign:'left'}} clickBtn = {( id, backData )=>{
        //id==myData.buttons.item中的，backData则是showV()传入的数据
    }}/>
```

------
        /****
       * 
       * buttons : [item，[item,item,item]]//内部可以是oject（）或者array（一行多个）
       * 
       * item : {
       *      title : 按钮文案
       *      titleColor : 文字颜色
       *      backgroundColor : 按钮背景色
       *      id : 区分回调
       * }
       * 
       * 
       */

```js
//this.refs.UIAlert.showV( myData, backData )
if (this.refs.UIAlert) {
  this.refs.UIAlert.showV( {
      title: "title",//通知标题
      text: "text",//内容
      buttons: [{
          title: "b1",
          titleColor: WHITE_COLOR,
          backgroundColor: YELLOW_COLOR,
          id:1,
        },[{
          title: "b1",
          titleColor: WHITE_COLOR,
          backgroundColor: YELLOW_COLOR,
          id:1
        },{
          title: "b2",
          titleColor: WHITE_COLOR,
          backgroundColor: YELLOW_COLOR,
          id:2
      },{
          title: "b3",
          titleColor: WHITE_COLOR,
          backgroundColor: YELLOW_COLOR,
          id:2
      }]]
  } )
}
```

# UIButton
## 属性说明
| Name              | Type             | Default            | Extra
| :----:            | :----:           | :----:             | :----:
| name              | String           | ""                 | 按钮的文字
| selected          | Boolean          | false              | 选择中或非选中按钮状态
| tagId             | id               | null               | 按钮的标识
| styles            | Dictionary       | {}                 | 按钮的样式
| onPress           | Function         | null               | 按钮触发返回tagId


## 使用
        import { UIButton } from 'react-native-uialert'

```js
       <View style={{ margin:5, height:35, }}>
            <UIButton
                name={ title }
                tagId = {id}
                onPress={(tagId)=>{
                    this.cancel(tagId);
                }}
                styles={{
                    backgroundColor:backgroundColor,
                    borderRadius:5,
                    fontSize:12,
                    titleColor:titleColor
                }}
            />
        </View>
```