分享一個純js的Modal彈窗元件react-native-root-modal
相比其他Modal彈窗元件，這個元件有以下幾個優勢
1.純javascript解決方案，安裝方便
2.同時相容ios和android
3.靈活度相當高，元素外層使用View包裹，你可以對Modal元素新增任何可以在View上新增的屬性（其他原生的Modal元素，比如官方提供的Modal，動畫、樣式、尺寸都改不了）
4.使用方便，和官方提供的Modal類似
引入Modal元素
在需要出現彈窗的地方新增<Modal visible={true}>...</Modal>
done.這個元素會出現在螢幕的最上層，會蓋住其他所有的元素，需要關閉彈窗把visible屬性改為false既可

更多介紹和案例檢視github

安裝

npm install [email protected]

使用

這個彈窗元件使用起來很方便：

1. 引入Modal

import Modal from 'react-native-root-modal';

2. 加入Modal元素，設定visible屬性為true,該彈窗和它裡面的內容就會出現在螢幕的最上層
   <Modal visible={true}>
   ...這裡是彈窗的內容
   </Modal>

TIPS

Modal元素和View元素的用法幾乎一樣，只是Modal元素會脫離文件流出現在其他元素上面
你可以給Modal新增自定義的樣式，也可以新增自定的動畫或者新增PanResponder，隨你怎麼玩，靈活性很大