React Native组件样式的最佳实践

时间:2019-05-24 04:42:36

标签: javascript css reactjs react-native

我目前正在为我公司中的React Native应用开发设置样板代码。一般来说,我们是React Native和Mobile App开发的新手,但是有大量的React / JS开发人员。

我想知道React Native中组件样式的最佳实践是什么。 我很好奇您如何构造样式代码以及使用哪种方法进行样式设计。

我看了几篇文章,在使用内联样式,来自核心库的StyleSheet组件或使用诸如StyledComponents之类的库之间有多种方法的见解。

就代码结构而言,我目前正在使用index.jsstyles.js将组件拆分到自己的文件夹中。这是一个可扩展的解决方案,用于更多的组件开发吗?

我将不胜感激任何建议或反馈。

2 个答案:

答案 0 :(得分:0)

这是一个很强烈的回应,我使用样式化的组件来对我的组件进行样式设置,我发现它非常简单直观,也很容易通过SSR实现样式。对于较小的项目,我在JSX上使用带有className属性的vanilla css。对于某些快速样式,我将JS对象符号与style属性一起使用。

答案 1 :(得分:0)

我没有使用内联CSS。我认为这不是一个好习惯。

在我的项目结构中,明智地使用功能。 例如,我们考虑登录功能

login -LoginForm.js
      -Login.container.js
      -Login.stylesheet.js

在Login.js中,您可以从Login.stylesheet.js导入样式

import st from "./Login.stylesheet"

在可重复使用的文件夹中,我们还维护了shared.stylesheet以及一些常见样式