npm 包 react-native-known-styling-properties 使用教程

在前端开发中，使用 React Native 进行移动端的开发已经成为了大势所趋。与之相关的 npm 包也愈发丰富，其中 react-native-known-styling-properties 就是一款非常实用的包，具有较高的使用价值。本文将详细介绍该 npm 包的使用方法，以及对于前端工程师有深度的指导和学习意义。

简介

react-native-known-styling-properties 是一款 React Native 的 CSS 属性列表，由于 React Native 没有像 web 一样的常见的样式属性，这个 npm 包是一种从谷歌的 Material Design 中将属性列表导出的方法。该 npm 包会自动补充缺失的样式属性列表，以促进 React Native 与 CSS 的开发流程协作。

安装

你可以使用 npm 包管理器来在 React Native 应用中安装 react-native-known-styling-properties：

npm install react-native-known-styling-properties --save

使用方法

安装完成后，在要使用该包的文件中导入，然后调用它：

-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ---- - ---- ---------------
------ ----------- ---- ----------------------------------------

----- --- - -- -- -
  ------ -
    ----- ------------------------------
      ----- ------------------------------ -------------
    -------
  --
--

------ ------- ----

现在，我们可以使用这个简单的 View 和 Text 示例来测试一下它的正确性。

你可以在 GitHub 上找到一个完整的样例：react-native-known-styling-properties-demo。

例子

• knownStyles.container

  {
    backgroundColor: '#fff',
    borderTopWidth: 1,
    borderTopColor: '#eaeaea',
    paddingVertical: 10,
  }

• knownStyles.text

  {
    color: '#333',
    fontSize: 18,
    fontWeight: 'bold',
  }

• knownStyles.button

  {
    padding: 10,
    backgroundColor: '#a99ae7',
    borderRadius: 5,
  }

• knownStyles.buttonText

  {
    color: '#fff',
    fontWeight: 'bold',
    fontSize: 20,
    textAlign: 'center',
  }

结束语

通过本文的介绍，相信读者已经对 react-native-known-styling-properties 的使用方法有了初步的了解。该 npm 包大大增加了 React Native 的样式属性，让前端开发工程师能够更好地进行移动端开发。我们希望这篇文章对您有所帮助！

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