npm 包 react-native-app-style 使用教程

在 React Native 开发中，如何快速搭建好看的应用风格是每个开发者都需要掌握的技能。幸运的是，有一个名为 react-native-app-style 的 npm 包可以帮助我们达成这个目标。本文将详细介绍这个包的使用方法。

安装

在 React Native 项目的根目录下打开终端，运行以下命令进行安装：

npm install react-native-app-style --save

或者使用 Yarn 安装：

yarn add react-native-app-style

使用

在组件文件中引入 react-native-app-style：

import AppStyle from 'react-native-app-style';

颜色

通过 AppStyle 可以方便地获取一个名为 color 的属性，它包含一些预定义的颜色值，如下所示：

const myStyle = {
  container: {
    backgroundColor: AppStyle.color.background,
    color: AppStyle.color.text,
  }
}

除了预定义的颜色值，也可以通过颜色名称获得自定义颜色：

const myStyle = {
  container: {
    backgroundColor: AppStyle.colorByName('PrimaryColor'),
    color: AppStyle.colorByName('SecondaryColor'),
  }
}

字体

使用 AppStyle 可以获取预定义的字体，在组件样式中使用即可：

const myStyle = {
  container: {
    fontFamily: AppStyle.font.family.regular,
    fontSize: AppStyle.font.size.m,
  }
}

另外，在 AppStyle 中也定义了行高 lineheight 和字体大小 font-size 的对应表，可以通过以下方式使用：

const myStyle = {
  container: {
    fontSize: AppStyle.fontSize.large,
    lineHeight: AppStyle.lineHeight.large,
  }
}

尺寸

通过 AppStyle 可以获得一些深度适配不同屏幕尺寸的尺寸值：

const myStyle = {
  container: {
    width: AppStyle.dimension.screenWidth * 0.8,
    height: AppStyle.dimension.screenHeight * 0.6,
  }
}

边框

AppStyle 定义了常见边框的样式：

const myStyle = {
  container: {
    borderWidth: AppStyle.border.width,
    borderStyle: AppStyle.border.style,
    borderColor: AppStyle.border.color,
  }
}

图标

在 AppStyle 中也定义了一些图标，可以用来减轻使用第三方图标库的负担：

import { Icon } from 'react-native-app-style';

const myComponent = () => (
  <View>
    <Icon name="close"/>
  </View>
)

以上是 AppStyle 常用的基本使用方法。当然，根据具体需求，我们可以使用更多丰富的功能。如果您需要更加详细和全面的介绍，请查阅官方文档。

结语

通过使用 react-native-app-style，我们可以快速方便地新增应用风格，提高开发效率，希望这篇文章对大家有帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600567f181e8991b448e418d