React Native 是一款流行的跨平台移动应用开发框架，但是在开发中我们常常遇到样式适配的问题，具体来说就是在不同平台、不同设备上，界面和样式的表现形式可能有很大差异。为了解决这个问题，通常采用百分比、flexbox 等方式来设置样式，但是这种方法不够灵活，如果界面变得越来越复杂，难以维护。在这种情况下，有一款 npm 包，名为 react-native-extended-stylesheet，它可以帮助我们更好地管理样式，提高开发效率。
安装
要使用 react-native-extended-stylesheet，需要先安装它，可以通过以下 npm 命令安装：
npm install react-native-extended-stylesheet --save
使用方法
1. 引入
引入方式和使用普通样式的方法一样，只需要在文件中使用 import 引入：
import EStyleSheet from 'react-native-extended-stylesheet';
2. 定义样式
接下来可以开始定义样式了，和普通样式不一样的地方在于，样式的定义需要使用 EStyleSheet.create 进行包装，例如：
-- -------------------- ---- -------
----- ------ - --------------------
---------- -
----- --
---------------- -----------
--
----- -
--------- ---
------ -------------
--
------- -
------ ------
------- -------
------------- -------
--------------- ---------
----------- ---------
---------------- ----------------
--
---在上面的例子中，我们可以看到，使用了 $ 符号来引用定义在另一个地方的样式参数。这些参数定义在一个类似 Sass 的 variables 文件中，我们需要在应用中先定义这些参数，然后才能在样式中使用它们。例如：
import EStyleSheet from 'react-native-extended-stylesheet';
EStyleSheet.build({
$bgColor: '#fff',
$textColor: '#222',
$primaryColor: '#007aff',
});3. 动态样式
react-native-extended-stylesheet 还支持动态样式，也就是说，你可以在运行时根据某些条件，动态修改样式。具体方法是使用 EStyleSheet.flatten，例如：
-- -------------------- ---- -------
----- ------ - --------------------
---------- -
----- --
---------------- -----------
--
----- -
--------- ---
------ -------------
--
------- -
------ ------
------- -------
------------- -------
--------------- ---------
----------- ---------
---------------- ----------------
--
--------------- -
---------------- -----------------
--
---
-- -------------------
----- ------------ - ---------------------
--------------
---------- -- ----------------------
---
------ -
----------------- ---------------------
----- ---------------------------------------
-------------------
--4. 媒体查询
另外一个非常有用的功能是媒体查询，可以根据设备尺寸或方向来适配界面。例如：
-- -------------------- ---- -------
----- ------ - --------------------
-------- -
----- --
-------- ---
------- ----- -
---------------- ---------
--
------- --------- -
---------------- -------
--
------- ----------- ------ -
-------- ---
--
--
---在上面的例子中，我们可以看到，@media 后面跟随着不同的设备标识符和条件，例如 ios、android、(min-width: 500) 等等。这样，我们就可以根据不同的条件设置不同的样式。
总结
使用 react-native-extended-stylesheet 可以大大提高开发效率，使得样式管理更加灵活和可维护。在多个项目中广泛使用，十分可靠和稳定。如果你是 React Native 开发者，一定要试一试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067350890c4f72775838b5