Skip to content

Latest commit

 

History

History
41 lines (30 loc) · 1.54 KB

README.md

File metadata and controls

41 lines (30 loc) · 1.54 KB
Raw

一个跨平台UI组件库

x-ui是基于react native和react开发出的跨android、ios和h5的三端ui组件库。

文档地址请戳「这里」

如何使用

起步

git clone本项目地址，将common和component放入项目中，之后您需要根据自身需求做出相应配置。

H5

移动端适配

x-ui h5端统一使用了阿里的flexible.js适配方案，版本为0.3.4，通过<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>将其链接到header标签中。flexible.js以iphone6为参考单位：在375 x 667dp， dpr为2的情况下，页面的缩放比例为0.5，html的font-size为75px。以100px为例，最终计算出的rem值为(100*2/75)rem。对于字体而言，建议以[data-dpr]属性来区分不同dpr下的文本字号大小：

div { font-size: 16px; } 
[data-dpr="2"] div { font-size: 32px; } 
[data-dpr="3"] div { font-size: 48px; }
字体

请将fonts文件夹放入您的项目中，并在css文件中配置：

@font-face
{
    font-family: Ionicons;
    src: url('fonts/Ionicons.ttf');
    font-style: italic; //required
}

React Native

Android

请将fonts文件夹放入android/app/src/main/assets/中。

IOS

请将fonts文件夹托至xcode中，勾选Add to targets和Create groups。在Info.plist中新建Fonts provided by application属性，item设置为Ionicons。

H5 与 Native 单位换算：1rem(h5) = 37.5px(h5) = 37.5(rn)