{"_id":"@_y/acss-rn","_rev":"4-1dc748a626e41e15aaf9d2d51db0128e","time":{"1.0.0":"2019-05-14T09:49:49.338Z","created":"2019-05-14T10:13:15.868Z","1.0.1":"2019-05-14T10:13:16.321Z","modified":"2022-04-04T10:51:44.026Z"},"name":"@_y/acss-rn","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.1":{"name":"@_y/acss-rn","version":"1.0.1","main":"index.js","peerDependencies":{"react":"16.5.0","react-native":"^0.57.7","styled-components":"^4.2.0"},"description":"基于React Native实现的Atomic CSS，用于快速简易地便编写RN对象样式。","_id":"@_y/acss-rn@1.0.1","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"nanasun","email":"1128yeye@sina.com"},"dist":{"integrity":"sha512-nbELi3EEx2AGQS83TQcAmdtRTkOf7b4/TdqARhEVOLFqHDEKajOhHWjrsPY8xyTKrgCfYw4WoTVf9swZZHd4ew==","shasum":"292f2869336fd7b50cde82f3e274cff7d539bd4f","tarball":"https://registry.npmjs.org/@_y/acss-rn/-/acss-rn-1.0.1.tgz","fileCount":7,"unpackedSize":12929,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc2pS8CRA9TVsSAnZWagAAAH8P/1t2rs2PlHjJAocmHv4j\numi48FNlgMx1P7JeUhj0TRqxpAJ821a0pJyWgU5YD8b35xvZdEgMstFlBydf\nvmuXo3DF2vmXXtLNROY7wmFBskcYBwa/qhNZn/662E/i8XigO6LCbCjsaAW1\nprnPydXMkLn8ysp1Dr21rFDAGw0WrQ5SCdFRZoUu0ZJLgA48G/VH/6I7gCSK\n3zZwavTO6Yo1sIA040KpJeW1lMuGUIivS+L9pTyt+j713eT7I0QXRIIdEhhX\nW6jnqTqJsP1rj5UiG7CJdmFmiCu2EXtx1j2LkzVLIQ+gdbHr6IqupWnM+lA9\nvragtgSaA2SiB3AmHsekb/C5OjpBYbgN192HcWgx0HlkznlXSPcDIdg+Hpxj\nRUStPWm5rtjt1q0R6B9DPAlwoUsFSpFlz0zhi+QOZnScikBIM7WaeCJLMoRa\nCshtfxuRR8eyIYZT9XM6vr3orAREopENNUdnivC4v2FsfBvWwY1LvaXz3vdR\nnuDAz3I6Ns9SySd1QfYC5WxKeYanBJEBYm1iAeFIq34YZCWJYGMlCzibTZud\nrZAn/XVzPh0Wm9UZeTlPM0aJWDTcaKlfiI2FhTM/comzKv1pNlrUKmkVq1qw\nO60XuV8Ex8xJNe7OGxEEe/OZU9we4A/TSHiYqglMt/jB2A+tdh6OxEJiDeA1\n/JVc\r\n=UmHk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQGne+LvpA11aCWV/EKk3aKYwkvoIW095G64sf3ZWIIQIhAO28r4ou50PFXx1N4BqL6VxdaCKETbxspmjZwjFomih6"}]},"maintainers":[{"name":"zhangdroid","email":"contrary.zhuo@gmail.com"},{"name":"nanasun","email":"1128yeye@sina.com"},{"name":"ziven27","email":"ziven27@qq.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/acss-rn_1.0.1_1557828796076_0.9164168807080824"},"_hasShrinkwrap":false}},"maintainers":[{"name":"zhangdroid","email":"contrary.zhuo@gmail.com"},{"name":"nanasun","email":"1128yeye@sina.com"},{"name":"ziven27","email":"ziven27@qq.com"}],"description":"基于React Native实现的Atomic CSS，用于快速简易地便编写RN对象样式。","readme":"# ACSS RN版本\n\n基于React Native实现的Atomic CSS，用于快速简易地便编写RN对象样式。\n\n## 安装\n\n```\nnpm install --save  @_y/acss-rn\n```\n\n## 用法\n\n### 基础版本\n\n```\nimport React from 'react';\nimport  { V, T } from '@_y/acss-rn'\nexport default class App extends React.Component {\n  render() {\n    return (\n        <V mt=\"40\">\n            <T c=\"#123212\">测试测试</T>  \n        </V>\n    );\n  }\n}\n```\n\n### 进阶版本\n\n封装组件，并传递props样式\n\n```\nimport React from 'react';\nimport  { V, T } from '@_y/acss-rn'\n\n// Button\nexport default function(props) {\n    return (\n        <V {...props}><T c_fff={props.c_fff}>这是一个按钮</T></V>\n    );\n}\n\n//调用\nimport Button from './components/Button'\nexport default class App extends React.Component {\n  render() {\n    return (\n        <V mt=\"40\">\n            <Button bg={\"yellow\"} c_fff w=\"50\" d=\"block\"></Button>\n            <Button bg={\"gray\"} c_fff w=\"50\" d=\"block\"></Button>  \n            <Button bg={\"blue\"} c_fff w=\"50\" d=\"block\"></Button>  \n            <Button bg={\"red\"} c_fff w=\"50\" d=\"block\"></Button>    \n        </V>\n    );\n  }\n}\n```\n\n## 详情API查询\n\nstyled-components\n\n|对外API|对应|作用|使用|\n|:--:|:--:|:--:|:--:|\n|V|View|类似于HTML中的div|`<Div mt=\"10\"></Div>`|\n|T|Text|不同与HMTL中的P，类似于span|`<P mt=\"10\">aaaaaa</P>`|\n|Img|Image|HTML中的img|\n|ImgBg|ImageBackground|||\n|ComponentStyled|/|封装对象，使其拥有ACSS样式|CustomStyle(View）|\n|SpeedCustomComponent|/|快速创建组件|SpeedCustomComponent(View）|\n\n## 自定义样式组件\n\n### 方式一\n\n快速创建组件\n\n定义\n```\nconst V = SpeedCustomComponent(View)\n```\n\n使用\n```\n<V mt=\"50\"><T>快速创建组件</T></V>\n```\n\n### 方式二\n\n自定义属性类型\n\n定义组件，以Text为例子\n\n首先封装成带有ACSS样式的组件\n```\nconst TStyled = styled(Text)`${props => Acss(props)};`;\n```\n\n再封装成高阶组件，可处理props，最后返回自定义的组件。\n```\nconst T = ({ ttu, ttc, children, ...otherProps }) => {\n  let text = children;\n  // 安卓设置了这个属性文字直接就不显示了\n  let isAndriod = Platform.OS !== \"ios\" ? true : false;\n  if (ttu && isAndriod) {\n    //变成小写\n    text = text.toUpperCase();\n  } else if (ttc && isAndriod) {\n    //变成大写\n    text = titleCase(text);\n  }\n  return (\n    <TStyled\n      ttu={isAndriod ? false : ttu}\n      ttc={isAndriod ? false : ttc}\n      {...otherProps}\n    >\n      {text}\n    </TStyled>\n  );\n};\n```\n\n## 单位转换问题\n\n根据屏幕大小给予不同dp 基数320px的屏幕16px为基准。\n\n|屏幕大小|size|\n|:--:|:--:|\n|<320|14px|\n|<361|16px~18px|\n|<414|18px~22px|\n|<1001|18px~22px|\n\nppx,\nrpx,\ndpx,\nspx,\ntoPpx,\ntoRpx,\ntoDpx,\ntoSpx,\nvh,\nvw,\nstatusBarHeight\n\n\n\n\n## 二维码体验Demo\n\n\n安装expo app：https://expo.io/tools\n\n\n## ACSS支持API一览\n\n### 不对应命名规则的各类API\n\n#### 特殊单位\n\n|API|对应|\n|:--:|:--:|\n|wp|`width:${props.wp};`单位是%|\n|hp|`height:${props.hp};`单位是%|\n|wrap|`margin-left:${toPpx(16)}px; margin-right:${toPpx(16)}px`|\n|row|`padding-left:${toPpx(16)}px; padding-right:${toPpx(16)}px`|\n\n### 其余按照命名规则存在的API\n \n#### background\n\n|API|对应|\n|:--:|:--:|\n|bg|background|\n|bgc|background-color|\n \n#### text transform\n|API|对应|\n|:--:|:--:|\n|tac|text-align:center;|\n|tar|text-align:right;|\n|ttu|text-transform: uppercase|\n|ttc|text-transform: capitalize|\n \n#### flexbox\n|API|对应|\n|:--:|:--:|\n|asfe|`align-self: flex-end;`|\n|aifs|`align-items: flex-start;`|\n|fdr|`flex-direction: row;`|\n|fdc|`flex-direction: column;`|\n|fwn|`flex-wrap: nowrap;`|\n|aic|`align-items: center;`|\n|jcsb|`justify-content: space-between;`|\n|jcc|justify-content: center;`|\n|jcfe|`justify-content: flex-end;`|\n|f1|`flex:1;`|\n  \n#### font\n|API|对应|\n|:--:|:--:|\n|fs|`font-size: ${toPpx(props.fs)}px;`|\n|fw|`font-weight:${props.fw};`|\n|c| `color: ${props.c};`|\n|c_l|`color: ${color.l};`|\n|c_m|`color: ${color.m};`|\n|c_s|`color: ${color.s};`|\n|c_xs|`color: ${color.xs};`|\n|c_000|`color: #000;`};\n|c_fff|`color: #fff;`};\n|c_primary|`color: ${color.primary}`font-weight:${props.fw};`\n|c_danger|`color: ${color.danger}`|\n|c_success|`color: ${color.success}`|\n|c_warning|color: ${color.warning}`|\n\n\n#### position\n\n|API|对应|\n|:--:|:--:|\n|pr|`position:relative;`|\n|pa |`position:absolute;`|\n|t0|`top:0;`|\n|l0|`left:0;`|\n|r0|`right:0;`|\n|b0|`bottom:0;`|\n\n\n#### border\n\n|API|对应|\n|:--:|:--:|\n|br|`border-radius:${props.br}px;`|\n\n#### 宽高\n\n|API|对应|\n|:--:|:--:|\n|w|`width:${toPpx(props.w)}px;`|\n|h|`height:${toPpx(props.h)}px;`|\n|lh|`line-height:${toPpx(props.lh)}px;`|\n\n#### margin\n\n|API|对应|\n|:--:|:--:|\n|mt|`margin-top:${toPpx(props.mt)}px;`|\n|mr|`margin-right:${toPpx(props.mr)}px;`|\n|mb|`margin-bottom:${toPpx(props.mb)}px;`|\n|ml|`margin-left:${toPpx(props.ml)}px;`|\n\n#### padding\n\n|API|对应|\n|:--:|:--:|\n|p|`padding:${toPpx(props.p)}px;`|\n|pt|`padding-top:${toPpx(props.pt)}px;`|\n|pr|`padding-right:${toPpx(props.pr)}px;`|\n|pb|`padding-bottom:${toPpx(props.pb)}px`|\n|pl|`padding-left:${toPpx(props.pl)}px;`|\n\n#### opacity\n\n|API|对应|\n|:--:|:--:|\n|o|`opacity:${toPpx(props.o)};`|","readmeFilename":"README.md"}