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

[youngwind]

前言

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

未完待续。。。。