在前端开发中，我们经常需要使用CSS来实现样式的设置，但对于移动端开发来说，CSS有一定的局限性。为了解决这个问题，一些框架和库被创建出来。在这篇文章中，我们将介绍如何使用一个npm包即react-native-better-styles来轻松地设置移动端样式。
什么是react-native-better-styles？
react-native-better-styles是一个基于React Native的样式库。它可以帮助我们轻松地设置样式，并且没有CSS的一些局限性。该库支持平台无关样式，样式重用以及扩展样式等特性。
安装react-native-better-styles
使用npm安装react-native-better-styles非常简单。只需要在命令行中进入你的项目文件夹，然后输入以下命令即可：
npm install react-native-better-styles --save
使用react-native-better-styles
使用react-native-better-styles的语法与CSS有些相似，但具有一些不同之处。以设置一个View的背景色为例，下面是在React Native中的CSS方式：
import { StyleSheet, View } from 'react-native';
const styles = StyleSheet.create({
container: {
backgroundColor: '#fff',
},
});
<View style={styles.container} />在使用react-native-better-styles时，你只需这样写：
import { bstyles, View } from 'react-native-better-styles';
<View style={bstyles.container.bgWhite} />这里的bstyles.container.bgWhite将返回一个一个拥有白色背景色的样式对象，你可以把它传递给View的style属性。
除了平台无关样式之外，react-native-better-styles还支持像文字字号、颜色、行高等样式的重用。例如：
import { bstyles, View } from 'react-native-better-styles';
<View style={bstyles.container}>
<Text style={bstyles.font.bold}>This text is bold</Text>
<Text style={bstyles.font.large}>This text is large</Text>
<Text style={bstyles.color.red}>This text is red</Text>
<Text style={bstyles.lineHeight.larger}>This text has a larger line height</Text>
</View>此时可以看到bstyles对象拥有包括字体大小及样式、颜色、行高、背景色在内的多种样式属性。
扩展样式
react-native-better-styles还支持通过扩展样式来创建更具有复用性和可读性的样式。例如：
-- -------------------- ---- -------
------ - -------- ---- - ---- -----------------------------
----- -------- - ----------------
----- -
---------------------
------------------------------------
--
------ -
---------------------
----------------------
--
---
----- ----------------------
----- ------------------------- ------------
-------这里的myStyles对象通过extend创建了一个page样式，它拥有container和paddingHorizontal等通用样式的属性。除此之外，我们还创建了一个title样式，它继承了font.bold和font.large等属性。这样可以使得代码更具有可读性和复用性。
总结
react-native-better-styles是一个非常有用的样式库，它可以使得移动端开发中的样式设置更加简单和灵活。在本文中，我们介绍了如何安装和使用该库，以及通过扩展样式来创建更具有可读性和复用性的样式。通过学习本文，你现在可以开始在React Native项目中使用react-native-better-styles啦！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005680081e8991b448e425c