Description
前言
我深信:learn once,write anywhere. 目前react-native的样式是通过像下面这样子来创建的。
var styles = StyleSheet.create({
//container
container: {
backgroundColor: '#F2F2F2',
flex: 1,
},
});
从前端开发的角度来看,这是内联样式啊!肯定要提到scss文件中去啦!所以我在寻找如何在react native的样式写到scss文件中的方法。
#1. react-native-css
此npm包号称可以把scss文件文件转化为js文件,然后再组件中require进去就可以了。但是我还有一个问题没有解决,导致目前还不能用这个。
React-native-cli doesn't use the node module ecosystem. The basic setup up is to have React-native running on one terminal, and the react-native-css on another. React-native-css will watch for changes and compile back to javascript.
我直接在terminal中执行 react-native-css就直接报错了,暂时没找到解决方法。
bash: react-native-css: command not found
更新》》》》》》》》》》》》
通过与作者issue,已经找到解决方案:react-native-css 需要全局安装,可能的原因是我的react-native-cli也是全局安装的,这个需要保持一致。
但是却引发了另一个问题,react-native-css不能watch住我的scss文件,有待解决....
而且还有另外一个问题。example中的例子是这样的。
description {
margin-bottom: 20;
font-size: 18;
text-align: center;
color: #656656;
}
如果在scss文件中这样写样式的话,肯定会报语法错误的啊。因为description不是合法的选择器。显然我需要的是差不多像下面这样的,也能成功转换的。这样就完全像在写scss了。learn once,write anywhere嘛~~
.description {
margin-bottom: 20;
font-size: 18;
text-align: center;
color: #656656;
}
未完待续。。。。