@_y/acss-rn 中文文档教程

Question

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

对外API	对应	作用	使用
V	View	类似于HTML中的div	<Div mt="10"></Div>
T	Text	不同与HMTL中的P，类似于span	<P mt="10">aaaaaa</P>
Img	Image	HTML中的img
ImgBg	ImageBackground
ComponentStyled	/	封装对象，使其拥有ACSS样式	CustomStyle(View）
SpeedCustomComponent	/	快速创建组件	SpeedCustomComponent(View）

自定义样式组件

方式一

快速创建组件

定义

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为基准。

屏幕大小	size
<320	14px
<361	16px~18px
<414	18px~22px
<1001	18px~22px

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

二维码体验Demo

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

ACSS支持API一览

不对应命名规则的各类API

特殊单位

API	对应
wp	width:${props.wp};单位是%
hp	height:${props.hp};单位是%
wrap	margin-left:${toPpx(16)}px; margin-right:${toPpx(16)}px
row	padding-left:${toPpx(16)}px; padding-right:${toPpx(16)}px

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

background

API	对应
bg	background
bgc	background-color

text transform

API	对应
tac	text-align:center;
tar	text-align:right;
ttu	text-transform: uppercase
ttc	text-transform: capitalize

flexbox

API	对应
asfe	align-self: flex-end;
aifs	align-items: flex-start;
fdr	flex-direction: row;
fdc	flex-direction: column;
fwn	flex-wrap: nowrap;
aic	align-items: center;
jcsb	justify-content: space-between;
jcc	justify-content: center;`
jcfe	justify-content: flex-end;
f1	flex:1;

font

API	对应
fs	font-size: ${toPpx(props.fs)}px;
fw	font-weight:${props.fw};
c	color: ${props.c};
c_l	color: ${color.l};
c_m	color: ${color.m};
c_s	color: ${color.s};
c_xs	color: ${color.xs};
c_000	color: #000;};
c_fff	color: #fff;};
c_primary	color: ${color.primary}font-weight:${props.fw};`
c_danger	color: ${color.danger}
c_success	color: ${color.success}
c_warning	color: ${color.warning}`

position

API	对应
pr	position:relative;
pa	position:absolute;
t0	top:0;
l0	left:0;
r0	right:0;
b0	bottom:0;

border

API	对应
br	border-radius:${props.br}px;

宽高

API	对应
w	width:${toPpx(props.w)}px;
h	height:${toPpx(props.h)}px;
lh	line-height:${toPpx(props.lh)}px;

margin

API	对应
mt	margin-top:${toPpx(props.mt)}px;
mr	margin-right:${toPpx(props.mr)}px;
mb	margin-bottom:${toPpx(props.mb)}px;
ml	margin-left:${toPpx(props.ml)}px;

padding

API	对应
p	padding:${toPpx(props.p)}px;
pt	padding-top:${toPpx(props.pt)}px;
pr	padding-right:${toPpx(props.pr)}px;
pb	padding-bottom:${toPpx(props.pb)}px
pl	padding-left:${toPpx(props.pl)}px;

opacity

API	对应
o	opacity:${toPpx(props.o)};