如果你是一个 React Native 开发者，那么你一定知道样式表在 React Native 中的重要性。但是，随着项目越来越庞大，每一个页面都要从头编写样式表是比较耗时的。这时，npm 包 rn-common-styles 可能就能帮到你了。
rn-common-styles 是一个 React Native 样式库，它提供了一些常用的样式和组件，可以帮助你快速搭建页面。在这篇文章中，我们将会介绍 rn-common-styles 的使用方法，包括如何安装、使用以及一些示例代码。
安装
- 使用
npm安装：
npm install rn-common-styles --save
- 使用
yarn安装：
yarn add rn-common-styles
使用
- 首先，在你的项目中引入 rn-common-styles：
import Style from 'rn-common-styles';
- 接下来，我们来看看如何使用其中的一些组件和样式。
样式
颜色
rn-common-styles 中提供了一些常用颜色的定义，在使用时可以直接引用。这些颜色的定义如下：
-- -------------------- ---- -------
------ ------- -
------ -
-------- ----------
------------- ----------
------------ ----------
---------- ----------
--------------- ----------
-------------- ----------
--
-------- -
------ ----------
-------- ----------
-------- ----------
-------- ----------
-------- ----------
-------- ----------
-------- ----------
------ ----------
--
--例如，在设置文字的颜色时，可以这样写：
<Text style={{ color: Style.neutral.gray500 }}>Hello, world!</Text>字体
rn-common-styles 中提供了一些常用字体的定义，在使用时可以直接引用。这些字体的定义如下：
-- -------------------- ---- -------
------ ------- -
----- -
------- -
-------- -------------------
----- -------------------
--
----- -
--- ---
--- ---
--- ---
----- ---
-------- ---
------ ---
--
--
--例如，在设置文字的样式时，可以这样写：
<Text style={{ fontFamily: Style.font.family.bold, fontSize: Style.font.size.h1 }}>Hello, world!</Text>布局
rn-common-styles 中也提供了一些常用的布局样式，包括：
-- -------------------- ---- -------
------ ------- -
------- -
-------------- ---
---- -
--------- -
------ -------------
------- ---------
---- -----------
------------- ----------------
------------ ---------------
------------ ---------------
--
---------- -
----- -------
-------- ----------
--
--
------- -
--------- -
------ -------------
------- ---------
---- -----------
------------- ----------------
------------ ---------------
------------ ---------------
--
---------- -
----- -------
-------- ----------
--
--
--
--例如，在设置水平方向的布局时，可以这样写：
<View style={{ flexDirection: 'row', justifyContent: Style.layout.row.mainAxis.spaceBetween }}>
<View />
<View />
</View>组件
rn-common-styles 中还提供了一些常用组件的定义，包括：
Button 组件
Button 组件用来展示一个按钮，提供了样式和回调函数等参数。使用时，直接在需要的地方引用即可。
-- -------------------- ---- -------
------ - ------ - ---- -------------------
-------- ---------- -
------ -
-------
------------ ----
----------- -- ------------- -----------
----------------- --------------- - --
--
--
-Card 组件
Card 组件用来展示一个卡片，提供了标题、描述和图片等参数。使用时，直接在需要的地方引用即可。
-- -------------------- ---- -------
------ - ---- - ---- -------------------
-------- -------- -
------ -
-----
------------- -------
----------------- -- - -------------
-------- ---- -------------------------------------------- --
----------------- --------------- - --
--
--
-Icon 组件
Icon 组件用来展示一个图标，提供了类型、大小和颜色等参数。使用时，直接在需要的地方引用即可。
-- -------------------- ---- -------
------ - ---- - ---- -------------------
-------- -------- -
------ -
-----
---------------
-------------
---------
---------------------------
----------------- --------------- - --
--
--
-总结
本文介绍了 rn-common-styles 的安装、使用以及一些示例代码。rn-common-styles 中提供了一些常用的样式和组件，能够帮助我们快速搭建页面。在实际的项目中，我们可以根据自己的需求进一步扩展 rn-common-styles 中提供的样式和组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005626881e8991b448dfb13