在移动开发中，表情符号可以让用户更好地表达自己的情感和想法，因此在 React Native 中使用表情符号也是开发者需要考虑的一点。而 @ardentlabs/react-native-emoji 套件可以帮助开发者快速并简单地在 React Native 中使用表情符号。
前置条件
在阅读本教程之前，你应该已经熟悉了 React Native、npm 包管理器以及基本的 JavaScript 语法。
安装
可以通过以下命令来安装 @ardentlabs/react-native-emoji：
npm install --save @ardentlabs/react-native-emoji
基础用法
在你的 React Native 应用程序中，您需要在导入包后使用 Emoji 套件来呈现表情符号。实例如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ---- - ---- ---------------
------ ----- ---- ---------------------------------
------ ------- -------- ----- -
------ -
----- -------- ----------- --------- --------------- --------- ----- - ---
----- -------- --------- -- ---
------- ------ ----------------- -- ---- ------
-------
-------
--
-在上面的代码片段中，我们首先导入了 Emoji 从 @ardentlabs/react-native-emoji 中。接着，我们在 Text 组件中使用 Emoji 标签，传递 name 属性作为表情符号的名称。此时我们渲染的是一个带有“示例”加表情符号的文本。
高级用法
除了基本的用法之外，@ardentlabs/react-native-emoji 还提供了一些可选的配置项，可以帮助给表情符号增加样式，比如 fontSize 和 color，如下所示：
<Emoji name="sunglasses" style={{ fontSize: 26 }} />我们还可以使用 CSS 样式来自定义表情符号的样式
-- -------------------- ---- -------
------ ----------------- -------------------------- - --------- -- --- --
----- ------ - -------------------
----------- -
------ -------
---------------- -------
----------------- - ------ -- ------- - --
----------------- --
--
---表情符号列表
最后，ClickMe链接 查看可用的表情符号列表，Web 端可以访问 此链接。
结论
在本教程中，我们简要介绍了 @ardentlabs/react-native-emoji 套件来渲染表情符号，并提供了一些基本和高级用法示例，以及可用的表情符号列表。现在你可以在 React Native 中轻松地呈现表情符号。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005725881e8991b448e874a