# react-native-xmodal

> react native 弹出框，类似android的DialogFragment

Latest version **1.1.1** (published 2017-07-21) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-xmodal
pnpm add react-native-xmodal
yarn add react-native-xmodal
bun add react-native-xmodal
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2017-07-21 |
| First published | 2017-07-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | mengqingdong |
| Maintainers | mengqingdong |

## Links

- npm: https://www.npmjs.com/package/react-native-xmodal
- npm.io page: https://npm.io/package/react-native-xmodal

## Recent versions

- 1.1.1 (latest) — 2017-07-21
- 1.1.0 — 2017-07-20
- 1.0.9 — 2017-07-20
- 1.0.8 — 2017-07-20
- 1.0.7 — 2017-07-20
- 1.0.6 — 2017-07-20
- 1.0.5 — 2017-07-20
- 1.0.4 — 2017-07-20
- 1.0.3 — 2017-07-20
- 1.0.2 — 2017-07-20
- 1.0.1 — 2017-07-20
- 1.0.0 — 2017-07-20

## README

# react-native-xmodal
react native 弹出框，类似android的DialogFragment

项目中依赖了mobx（https://github.com/mobxjs/mobx） 和  babel-plugin-transform-decorators-legacy（https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy）

使用：

1、在终端进入到项目目录：npm i react-native-xmodal --save

2、在整个app的最外层添加 ModalContainer 控件，一般项目我们都会用到react-navigation，所以使用react-navigation实例：
   
      render() {
        return (
            <View  style={{flex:1}}>
                <Navigator/>
                <View style={{position:'absolute',top:0,left:0,right:0,bottom:0,}}>
                    <ModalContainer/>
                </View>
            </View>
        );
    }
    
    
 3、在需要弹出的地方调用： XModal.show(<Component/>);
 
 4、隐藏：XModal.hide();
 
 show方法等参数：
 
 component：要显示的组件
 
 animationType：modal的animationType ，默认‘fade’
 
 transparent：modal是否透明，默认true
 
 position：弹出的位置，默认居中，
 
 
 ![image](https://github.com/781238222/react-native-xmodal/blob/master/examples/screen/123.png)

---
_Source: https://npm.io/package/react-native-xmodal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._