@_nu/react-native-acss 中文文档教程

Question

nu-react-native-acss

在 React Native 中编写样式的快速方法。

来自 Atomic CSS 设计系统的想法。

$ yarn add @_nu/react-native-acss

How to use?

import React from 'react';
import {Text, View, ImageBackground, Image} from './packages/withAcss';
import mImg1 from "./assets/1.jpg";
import mImg2 from "./assets/1.jpg";

export default function App() {
    return (
        <View bc="#f5f5f5" pt={100} ph={30} h="100%">
            <View mb={16} aic>
                <Image br={32} w={64} h={64} source={mImg1}/>
            </View>
            <Text c="#ffffff" p={16} bc="#4c5fe2" tac mb={16}>Hello world!</Text>
            <ImageBackground source={mImg2} mb={40}>
                <View bc="rgba(255,255,255,.8)">
                    <Text fs={40} lh={100} tac fwb c="#4c5fe2">Hello Again!</Text>
                </View>
            </ImageBackground>
        </View>
    );
};

How to bind to custom component?

import React from 'react';
import {Text, View} from 'react-native';
import widthAcss from './packages/withAcss';

const CusText = widthAcss(Text);
const CusView = widthAcss(View);

export default function App() {
    return (
        <CusView bc="#4c5fe2" p={16}>
            <CusText tac c="#ffffff">Custom text</CusText>
        </CusView>
    );
};

Name rules

乍一看我们使用的是缩写而不是全名。

因为我们希望用户只记住下面的规则，而不是所有的道具。

1. Only Initials: aic means alignItems: center;
2. Direct digital connection: fw700 means fontWidth:700;
3. p means percent: w100p means width:'100%';

<View mb={16} bc="#4c5fe2" aic>
    <Text c="#ffffff" pt={16} pb={16} tac>Hello world!</Text>
</View>

等于

<View style={{
    marginBottom:16,
    backgroundColor:'#4c5fe2',
    alignItem:'center'
}}>
    <Text style={{
      color:'#ffffff',
      paddingTop: 16,
      paddingBottom: 16,
      alignItem:'center'
    }}>Hello world!</Text>
</View>

API

const styleMap = {
  ac: 'alignContent',
  acs: ['alignContent', 'stretch'],
  acc: ['alignContent', 'center'],
  acfs: ['alignContent', 'flex-start'],
  acfe: ['alignContent', 'flex-end'],
  acsb: ['alignContent', 'space-between'],
  acsa: ['alignContent', 'space-around'],
  ai: 'align-items',
  ais: ['alignItems', 'stretch'],
  aib: ['alignItems', 'baseline'],
  aic: ['alignItems', 'center'],
  aifs: ['alignItems', 'flex-start'],
  aife: ['alignItems', 'flex-end'],
  as: 'alignSelf',
  asa: ['alignSelf', 'auto'],
  ass: ['alignSelf', 'stretch'],
  asb: ['alignSelf', 'baseline'],
  asc: ['alignSelf', 'center'],
  asfs: ['alignSelf', 'flex-start'],
  asfe: ['alignSelf', 'flex-end'],
  bc: 'backgroundColor',
  br: 'borderRadius',
  bw: 'borderWidth',
  bs: 'borderStyle',
  btw: 'borderTopWidth',
  btc: 'borderTopColor',
  brw: 'borderRightWidth',
  brc: 'borderRightColor',
  bbw: 'borderBottomWidth',
  bbc: 'borderBottomColor',
  blw: 'borderLeftWidth',
  blc: 'borderLeftColor',
  btrr: 'borderTopRightRadius',
  btlr: 'borderTopLeftRadius',
  bbrr: 'borderBottomRightRadius',
  bblr: 'borderBottomLeftRadius',
  b: 'bottom',
  b0: 'bottom',
  c: 'color',
  dn: ['display', 'none'],
  f: 'flex',
  f1: ['flex', 1],
  fdr: ['flexDirection', 'row'],
  fdrr: ['flexDirection', 'row-reverse'],
  fdc: ['flexDirection', 'column'],
  fdcr: ['flexDirection', 'column-reverse'],
  fwn: ['flexWrap', 'nowrap'],
  fwb: ['fontWeight', 'bold'],
  fw100: ['fontWeight', 100],
  fw200: ['fontWeight', 200],
  fw300: ['fontWeight', 300],
  fw400: ['fontWeight', 400],
  fw500: ['fontWeight', 500],
  fw600: ['fontWeight', 600],
  fw700: ['fontWeight', 700],
  fw800: ['fontWeight', 800],
  fw900: ['fontWeight', 900],
  fs: 'fontSize',
  ff: 'fontFamily',
  fsn: ['fontStyle', 'normal'],
  fsi: ['fontStyle', 'italic'],
  h: 'height',
  h100p: ['height', '100%'],
  jcc: ['justifyContent', 'center'],
  jcsb: ['justifyContent', 'space-between'],
  jcfs: ['justifyContent', 'flex-start'],
  jcfe: ['justifyContent', 'flex-end'],
  jcsa: ['justifyContent', 'space-around'],
  jcse: ['justifyContent', 'space-evenly'],
  l: 'left',
  l0: ['left', 0],
  lh: 'lineHeight',
  m(value) {
    return {
      marginTop: value,
      marginBottom: value,
      marginRight: value,
      marginLeft: value,
    };
  },
  mt: 'marginTop',
  mr: 'marginRight',
  mb: 'marginBottom',
  ml: 'marginLeft',
  mh: 'marginHorizontal',
  mv: 'marginVertical',
  o: 'opacity',
  oh: ['overflow', 'hidden'],
  p(value) {
    return {
      paddingTop: value,
      paddingBottom: value,
      paddingRight: value,
      paddingLeft: value,
    };
  },
  pa: ['position', 'absolute'],
  pr(value) {
    if (value === true) {
      return {
        position: 'relative',
      };
    }
    return {
      paddingRight: value,
    };
  },
  pt: 'paddingTop',
  pb: 'paddingBottom',
  pl: 'paddingLeft',
  ph: 'paddingHorizontal',
  pv: 'paddingVertical',
  r: 'right',
  r0: ['right', 0],
  t: 'top',
  t0: ['top', 0],
  tac: ['textAlign', 'center'],
  tar: ['textAlign', 'right'],
  taa: ['textAlign', 'auto'],
  tal: ['textAlign', 'left'],
  taj: ['textAlign', 'justify'],
  ttu: ['textTransform', 'uppercase'],
  ttc: ['textTransform', 'capitalize'],
  ttn: ['textTransform', 'none'],
  ttl: ['textTransform', 'lowercase'],
  w: 'width',
  w100p: ['width', '100%'],
  zi: 'zIndex',
};

纯粹、简单、自然。

如您所见，这就是我们创建的所有代码。

我们只是做了一点点，但可以在 React Native 中创建样式时为您提供很多帮助。

一起帮助让它变得更好问题。