将 scss 包含在反应原生项目中?

Question

有没有办法在 react 本机应用程序中处理 scss 文件？我只是好奇，对反应原生应用程序架构没有太多了解，但正在考虑使用我当前的项目 scss 文件来处理我们计划构建的新反应原生 android 项目。

反应本机版本："0.46.4">

反应版本："16.0.0-alpha.12">

BABEL-PRESET-REACT-NATIVE： "2.1.0">

更新：

我搜索了一点发现 css-to-react-native，这有点让我将我的 css 转换为 react-native 样式表对象，这对我来说是一种解决方法。

谢谢。

Answer 1

TL;大卫：是的，你可以。

https://github.com/kristerkari/react-native-sass-transformer

它需要像这样的 scss：

.myClass {
color: blue;
}
.myOtherClass {
color: red;
}

并将其转换为

var styles = {
myClass: {
color: "blue"
},
myOtherClass: {
color: "red"
}
};

简单易行。

Answer 2

TL;大卫：不，你不能。

在 react-native 中，我们使用内联样式，您可以使用Stylesheet.create.

为什么你不能像样式一样CSS是，在react native中也没有#id.class，所以你不能像通常在css样式中那样将样式应用于#id或.class。而且也没有相关的样式，就像在 css 中你可以做.element1 > .element2.

我认为大多数开发人员使用 scss 的主要原因是使用嵌套类定义。如下面：

.element1 {
> .element2 {
...
}
} 

而且因为 react-native 组件中没有类似特性的类，所以这样的方法不能应用于 react-native 中。

示例如何创建样式：

const styles = StyleSheet.create({
bigblue: {
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
},
red: {
color: 'red',
},
});