react-native-css

> 编程语言

开源

样式 React - 使用 CSS 的原生组件

769 stars0 点赞1 次浏览

访问官网 GitHub

工具介绍

样式 React - 使用 CSS 的原生组件

React-native-css()

React-native-css 将有效的 CSS 转换为 Facebook 的 CSS 子集。

Babel 插件

令人惊叹的 @danilosterrapid7 为 React-native-css 创建了一个 babel 插件: https://www.npmjs.com/package/babel-plugin-react-native-sass-classname

版本 2

在版本 2 中,出现了新的变化:

移除 Sass/Scss 支持,这对效果微小的代价却很大。
没有 CLI,我们认为这是一个不必要的上下文切换
没有 I/O,不再写文件,我们在运行时完成一切操作。

如果您仍然希望访问旧实现,请查看 v1 分支。

安装

bash

yarn add react-native-css

bash

npm install react-native-css --save

示例

考虑以下 CSS:

javascript

import RNC from 'react-native-css';

RNC`
  description {
    margin-bottom: 20px;
    font-size: 18px;
    text-align: center;
    color: #656656;
  }

  container {
    padding: 30px;
    margin-top: 65px;
    align-items: center;
    display: block;
  }
`

React-native-css 将生成以下内容:

javascript

{"description":{"marginBottom":20,"fontSize":18,"textAlign":"center","color":"#656656"},"container":{"padding":30,"marginTop":65,"alignItems":"center"}}

使用方式

javascript

import RNC from 'react-native-css';

class SearchPage extends Component {
  render() {
    const { color, fontSize } = this.props;
      const styles = RNC`
        description {
          margin-bottom: 20px;
          font-size: ${fontSize}
          text-align: center;
          color: ${color}
        }

        container {
          padding: 30px;
          margin-top: 65px;
          align-items: center;
          display: block;
        }
      `;

    return (
      
        
            Search!
        
      
    );
  }
}