前言
作为前端开发者，经常需要在构建 React Native 应用时使用 BEM 方法来规范代码风格和组件的命名。为此，我们使用 npm 包 react-native-bem 可以帮助我们更好地实现此目的。本文将详细介绍如何使用此 npm 包来实现 React Native 的 BEM 风格。
BEM 简介
BEM 是一种前端开发中常见的 CSS 样式命名方法，其全称为 Block Element Modifier。它将组件拆分成块（Block）、元素（Element）和修饰符（Modifier），并且在命名中使用中划线、双下划线和双中括号来表示它们的关系。例如：
<div class="person"> <span class="person__name">John Doe</span> <span class="person__age person__age--highlighted">30</span> </div>
其中，.person 表示块，.person__name 表示元素，.person__age--highlighted 表示修饰符。
BEM 不仅适用于 CSS，也可以用于 JavaScript 和 React Native 组件的命名。
react-native-bem 简介
react-native-bem 是一个适用于 React Native 应用的 npm 包，可以帮助我们更轻松地在 React Native 应用中使用 BEM 风格的组件命名和样式编写。
安装和使用
react-native-bem 是一个 npm 包，我们可以使用以下命令安装它：
npm install react-native-bem --save
安装完毕后，我们可以开始使用它进行 React Native 的 BEM 风格编写。
创建 Block
我们可以使用 createBlock 方法创建一个 Block。该方法有两个参数：
- Block 的名称
- Block 的样式
例如，我们要创建一个名为 person 的 Block，我们可以这样写：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- -------------------
------ ------- ----- ------ - --------------------- -
---------- -
----- --
--------------- ---------
----------- ---------
--
----- -
--------- ---
----------- -------
--
---- -
--------- ---
------ -------
--
--------------- -
------ -------
--
---其中，我们使用了 createBlock 方法来创建了一个名为 person 的 Block，并且定义了该 Block 中的样式。
创建 Element
我们可以使用 createElement 方法创建一个 Element。该方法有两个参数：
- Element 所在的 Block
- Element 的名称
例如，我们要创建一个名为 name 的 Element，它属于 person Block，我们可以这样写：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ------------- - ---- -------------------
----- ------ - --------------------- -
---------- -
----- --
--------------- ---------
----------- ---------
--
----- -
--------- ---
----------- -------
--
---- -
--------- ---
------ -------
--
--------------- -
------ -------
--
---
------ ------- ----- ---------- - --------------------- --------其中，我们使用了 createElement 方法来创建了一个名为 name 的 Element，并且指定它属于 person Block。
创建 Modifier
我们可以使用 createModifier 方法创建一个 Modifier。该方法有两个参数：
- Modifier 所在的 Block 或者 Element
- Modifier 的名称和样式
例如，我们要创建一个名为 ageHighlighted 的 Modifier，它将 age Element 的文字颜色设置为红色，我们可以这样写：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ -------------- -------------- - ---- -------------------
----- ------ - --------------------- -
---------- -
----- --
--------------- ---------
----------- ---------
--
----- -
--------- ---
----------- -------
--
---- -
--------- ---
------ -------
--
---
----- ---------- - --------------------- --------
------ ------- ----- -------------------- - -------------------------- -
--------------- -
------ -------
--
---其中，我们使用了 createModifier 方法来创建了一个名为 ageHighlighted 的 Modifier，并且指定了它将 age Element 的文字颜色设置为红色。
使用样式
在使用上述方法创建好 Block、Element 和 Modifier 后，我们可以使用 style 属性来应用样式。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ -------------- -------------- - ---- -------------------
----- ------ - --------------------- -
---------- -
----- --
--------------- ---------
----------- ---------
--
----- -
--------- ---
----------- -------
--
---- -
--------- ---
------ -------
--
---
----- ---------- - --------------------- --------
----- --------- - --------------------- -------
----- -------------------- - ------------------------- -
--------------- -
------ -------
--
---
------ ------- -------- ----- -
------ -
--------
---------------- ----------------
-------------------------
-----------------------------------------------
---------
--
-其中，我们将 Person Block 和 PersonName、PersonAge、PersonAgeHighlighted 三个 Element 放在一起，并且通过 style 属性来对它们进行样式设置。
总结
通过使用 npm 包 react-native-bem，我们可以更好地应用 BEM 风格的组件命名和样式编写。以上就是如何用此 npm 包来实现 React Native 的 BEM 风格的简单教程。希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f8c238a385564ab6e5c