react-native:寻找像写scss那样写react native 样式的方法

@youngwind 2015-12-27 14:35:29发表于 youngwind/blog React

前言

我深信: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;
}

未完待续。。。。