Snackbar 是 Material Design 中的重要组件之一，用于向用户传递简短的信息和操作反馈。在基于 React Native 的移动应用中，我们可以使用第三方库 react-native-material-ui 来实现 Material Design 风格的 Snackbar。本文将介绍这个库的使用方法，并给出相关示例代码。
安装和配置
首先，我们需要安装相关依赖：
npm install react-native-material-ui
然后在 App.js 文件中导入相关组件，并将 ThemeProvider 组件作为最外层的包裹组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- ---- - ---- ---------------
------ - -------------- -------- - ---- ---------------------------
----- ------- - -
-------- -
------------- ----------
--
--
------ ------- -------- ----- -
------ -
-------------- ------------------
----- -------------------------
--------- --------------- ---------- --
-------
----------------
--
-
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- ---------
--
---在 ThemeProvider 中，我们可以通过传入 uiTheme 对象来定制 Snackbar 的颜色、字体等相关样式。在这个例子中，我们将 Snackbar 的主色调设置为蓝色。
基本用法
使用 Snackbar 组件非常简单，只需要在需要弹出 Snackbar 的位置插入组件即可。例如，在用户登录成功后，我们可以使用 Snackbar 来提示用户：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----------- ----- ---------- ------ - ---- ---------------
------ - -------------- -------- - ---- ---------------------------
----- ------- - -
-------- -
------------- ----------
--
--
------ ------- -------- ----- -
----- ---------- ------------ - -------------
----- ---------- ------------ - -------------
----- -------------- ---------------- - ----------------
-------- ------------- -
-- -- --- ------
-- --------- --------
----------------------
-
------ -
-------------- ------------------
----- -------------------------
----------
--------------------
----------------------
--------------------------
--
----------
--------------------
----------------------
--------------------------
--
------- ------------- --------------------- --
------------- -- -
--------- -------------- ----------- ------------------ -- ----------------------- --
--
-------
----------------
--
-
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- ---------
--
------ -
------ ----
------- ---
------------ --
------------ -------
------------- --
------------ ---
---------- ---
------------- ---
--
---在这个例子中，我们使用 useState 钩子来管理用户名、密码和是否显示 Snackbar 的状态。当用户点击登录按钮时，我们调用 handleLogin 函数来模拟用户登录操作，并在登录成功后将 showSnackbar 置为 true，从而显示 Snackbar。Snackbar 组件的 message 属性是 Snackbar 显示的文本内容，onRequestClose 属性是 Snackbar 关闭时的回调函数。
高级用法
除了基本用法外，react-native-material-ui 也提供了一些高级用法，例如自定义 Snackbar 的样式和位置，以及使用 React Hook 来控制 Snackbar 的显示和隐藏。下面我们将分别介绍这些用法。
自定义 Snackbar 样式
如果我们想要自定义 Snackbar 的样式，例如修改字体颜色、文字大小等，可以在 uiTheme 对象中添加 globalStyles 字段：
-- -------------------- ---- -------
----- ------- - -
-------- -
------------- ----------
--
------------- -
------------- -
------ --------
--------- ---
--
--
--你还可以使用以下字段来自定义 Snackbar：
- snackbarContainer: Snackbar 最外层容器的样式。
- snackbarView: Snackbar 内部 View 组件的样式。
- snackbarViewWrapper: Snackbar 的包裹 View 组件的样式。
- snackbarText: Snackbar 内部文本组件的样式。
- snackbarAction: Snackbar 操作按钮的样式。
- snackbarActionButtonWrapper: Snackbar 操作按钮包裹组件的样式。
自定义 Snackbar 位置
默认情况下，Snackbar 会显示在屏幕的底部。如果我们希望将 Snackbar 放置在顶部或左侧，可以使用 Snackbar 的 position 属性。position 可以取以下值：
- bottom (默认值)：底部。
- top：顶部。
- left：左侧。
- right：右侧。
- center：居中显示。
<Snackbar message="Hello, Snackbar!" position="top" />
使用 React Hook 控制 Snackbar 显示和隐藏
如果我们想要手动控制 Snackbar 的显示和隐藏，可以通过 useSnackbar 钩子来实现。这个钩子将返回一个对象，其中包含三个方法：showSnackbar、hideSnackbar 和 renderSnackbar。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----------- ----- ---------- ------ - ---- ---------------
------ - -------------- ----------- - ---- ---------------------------
----- ------- - -
-------- -
------------- ----------
--
--
------ ------- -------- ----- -
----- ---------- ------------ - -------------
----- ---------- ------------ - -------------
----- - ------------- ------------- -------------- - - --------------
----- -------- ------------- -
-- -- --- ------
-- --------- --------
-------------- -------- ------ ----------- ---
-
------ -
-------------- ------------------
----- -------------------------
----------
--------------------
----------------------
--------------------------
--
----------
--------------------
----------------------
--------------------------
--
------- ------------- --------------------- --
------------------
-------
----------------
--
-
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- ---------
--
------ -
------ ----
------- ---
------------ --
------------ -------
------------- --
------------ ---
---------- ---
------------- ---
--
---在这个例子中，我们使用 useSnackbar 钩子来控制 Snackbar 的显示和隐藏。当用户登录成功后，我们调用 showSnackbar 方法来显示 Snackbar，当 Snackbar 需要隐藏时，我们可以调用 hideSnackbar 方法。最后，我们还需要在组件的最外层插入 renderSnackbar 方法来渲染 Snackbar。这个方法会渲染 Snackbar 组件或者空组件，具体情况取决于是否需要显示 Snackbar。
总结
通过使用 react-native-material-ui 库，我们可以轻松实现 Material Design 风格的 Snackbar。除了基本用法外，我们还介绍了自定义 Snackbar 样式和位置，以及使用 React Hook 来控制 Snackbar 显示和隐藏的高级用法。希望这篇文章对你的学习和实践有所帮助。完整示例代码见下：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----------- ----- ---------- ------ - ---- ---------------
------ - -------------- --------- ----------- - ---- ---------------------------
----- ------- - -
-------- -
------------- ----------
--
------------- -
------------- -
------ --------
--------- ---
--
--
--
------ ------- -------- ----- -
----- ---------- ------------ - -------------
----- ---------- ------------ - -------------
----- - ------------- ------------- -------------- - - --------------
----- -------- ------------- -
-- -- --- ------
-- --------- --------
-------------- -------- ------ ----------- ---
-
------ -
-------------- ------------------
----- -------------------------
----------
--------------------
----------------------
--------------------------
--
----------
--------------------
----------------------
--------------------------
--
------- ------------- --------------------- --
------------------
-------
----------------
--
-
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- ---------
--
------ -
------ ----
------- ---
------------ --
------------ -------
------------- --
------------ ---
---------- ---
------------- ---
--
---
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e9d74ef6b2d6eab34fcd94