React Native 是当前比较流行的跨平台移动应用开发框架，它可以让开发者使用 JavaScript 创建原生应用。React Native 中提供了很多组件，但是在某些场景下需要使用 Modal 组件才能满足需求。本文将介绍一个 npm 包 react-native-global-modal，它可以方便地在应用中全局使用 Modal 组件。
安装
首先需要在项目中安装 react-native-global-modal：
npm install react-native-global-modal --save
使用
- 在应用启动时引入并初始化 react-native-global-modal
import RNModal from 'react-native-global-modal'; RNModal.init();
- 如需在某个页面中使用 Modal 组件，按如下方式调用：
import { RNModal } from 'react-native-global-modal';
RNModal.show(
<View>
<Text>这是 Modal 内容</Text>
</View>,
);- 如果需要在 Modal 中使用路由跳转等功能，则需要将 NavigationActions 传入 Modal 中：
-- -------------------- ---- -------
------ - ------- - ---- ----------------------------
------ - ----------------- - ---- -------------------
----- -------------- - ----------------------------
---------- ---------------
------- ---
---
-------------
------
-------- ----- ---------
------- ------------ ----------- -- -------------------------------- --
--------
--API
RNModal.init()
初始化 react-native-global-modal。需要在应用启动时调用一次。
RNModal.show(element, options)
显示 Modal 组件。element 参数为 Modal 内容，options 参数为 Modal 选项，具体选项如下：
animated，布尔类型，默认为 true，表示是否需要显示动画效果。animationType，字符串类型，默认为 'none'，表示 Modal 显示时的动画类型，可选值为 'none'、'slide' 和 'fade'。onDismiss，函数类型，当 Modal 被关闭时执行的回调函数。
示例代码：
-- -------------------- ---- -------
-------------
------
-------- ----- ---------
--------
-
--------- -----
-------------- --------
---------- -- -- ------------------ -------
--
--RNModal.dismiss(navigationAction)
关闭当前显示的 Modal。如果需要在关闭 Modal 的同时执行路由跳转等操作，则需要将 NavigationActions 作为参数传入。
示例代码：
import { RNModal } from 'react-native-global-modal';
import { NavigationActions } from 'react-navigation';
const navigateAction = NavigationActions.navigate({ routeName: 'SecondScreen' });
RNModal.dismiss(navigateAction);总结
本文介绍了 npm 包 react-native-global-modal 的使用方法和 API，它能够方便地在应用中全局使用 Modal 组件。使用 react-native-global-modal，开发者可以更加快捷和方便地实现 Modal 的显示和关闭。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668681e8991b448e2b9a