@_y/acss-rn v1.0.1

ACSS RN版本

基于React Native实现的Atomic CSS，用于快速简易地便编写RN对象样式。

安装

npm install --save  @_y/acss-rn

用法

基础版本

import React from 'react';
import  { V, T } from '@_y/acss-rn'
export default class App extends React.Component {
  render() {
    return (
        <V mt="40">
            <T c="#123212">测试测试</T>  
        </V>
    );
  }
}

进阶版本

封装组件，并传递props样式

import React from 'react';
import  { V, T } from '@_y/acss-rn'

// Button
export default function(props) {
    return (
        <V {...props}><T c_fff={props.c_fff}>这是一个按钮</T></V>
    );
}

//调用
import Button from './components/Button'
export default class App extends React.Component {
  render() {
    return (
        <V mt="40">
            <Button bg={"yellow"} c_fff w="50" d="block"></Button>
            <Button bg={"gray"} c_fff w="50" d="block"></Button>  
            <Button bg={"blue"} c_fff w="50" d="block"></Button>  
            <Button bg={"red"} c_fff w="50" d="block"></Button>    
        </V>
    );
  }
}

详情API查询

styled-components

自定义样式组件

方式一

快速创建组件

定义

const V = SpeedCustomComponent(View)

使用

<V mt="50"><T>快速创建组件</T></V>

方式二

自定义属性类型

定义组件，以Text为例子

首先封装成带有ACSS样式的组件

const TStyled = styled(Text)`${props => Acss(props)};`;

再封装成高阶组件，可处理props，最后返回自定义的组件。

const T = ({ ttu, ttc, children, ...otherProps }) => {
  let text = children;
  // 安卓设置了这个属性文字直接就不显示了
  let isAndriod = Platform.OS !== "ios" ? true : false;
  if (ttu && isAndriod) {
    //变成小写
    text = text.toUpperCase();
  } else if (ttc && isAndriod) {
    //变成大写
    text = titleCase(text);
  }
  return (
    <TStyled
      ttu={isAndriod ? false : ttu}
      ttc={isAndriod ? false : ttc}
      {...otherProps}
    >
      {text}
    </TStyled>
  );
};

单位转换问题

根据屏幕大小给予不同dp 基数320px的屏幕16px为基准。

ppx, rpx, dpx, spx, toPpx, toRpx, toDpx, toSpx, vh, vw, statusBarHeight

二维码体验Demo

安装expo app：https://expo.io/tools

ACSS支持API一览

不对应命名规则的各类API

特殊单位

其余按照命名规则存在的API

background

text transform

flexbox

font

position

border

宽高

margin

padding

opacity