🚄🚄使用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和共同维护。
MIT