react-native-css-file

🚄🚄使用css文件书写react-native的样式

按照官方写法

let styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

---

使用css文件来实现

/**
 * global.css
 */

.container {
    flex: 1;
    justify-content: center;
    align-items: center;
    background-color: #F5FCFF;
}

.welcome {
    font-size: 20;
    text-align: center;
    margin: 10;
}

.instructions{
    text-align: center;
    color: #333;
    margin-bottom: 5;
}

const styles = require('./styles/global').build();

特性

• 支持类选择器
• 支持css简写，例如transform: rotate(60deg) scale(1.2)，margin: 3px 3px;，border: solid 1px #ccc等
• css注释
• 错误信息跟踪
• 自定义变量
• 🚫 派生选择器（考虑实现）

安装

npm install react-native-css-file

使用

首先，在项目的任何地方创建一个css文件。例如在Header组件中创建一个headerStyles.css文件

- Header
  - Header.js
  - headerStyles.css

/* headerStyles.css */

.container {
  flex: 1;
  backgroundColor: #fff;
}

.icon {
  border: solid 1px #fff;
  pading: 3px 5px;
}

在package.json中添加一个命令

"css": "rncss ./ --watch",
"css-build": "rncss ./",

然后运行 npm run css，会自动生成一个headerStyles.js文件（注意不要手动更改它）。

然后像以往那样使用css。

// Header.js

const styles = require('./headerStyles').build();

// ...
render() {
  return (
    <View style={styles.container}>
       <View style={styles.Icon} />
    </View>
  );
}

// ...

变量

因为在RN开发过程中经常需要动态的初始化样式，例如通过Dimensions来获取窗口大小然后设置高宽。为了在css中实现这样效果，这里提供了变量支持。

/* header.css*/
.icon {
  height: iconHeight;
  width: iconWidth;
}

.border {
  height: hairlineWidth;
}

在调用build方法时传入你想要设置的值

  require('./headerStyles').build({
    iconHeight: 30,
    iconWidth: 60,
  });

预制的变量有:

• hairlineWidth StylesSheet.hairlineWidth

示例

 git clone https://github.com/yqz0203/react-native-css-file.git`

 cd ./react-native-css-file/example

 yarn

 npm run css

 react-native run-ios

注意必须使用yarn安装

问题

项目初期不可避免有功能缺失以及BUG，欢迎大家提出issue和共同维护。

License

MIT