Giter VIP home page Giter VIP logo

rn-pxtrans's Introduction

解决什么痛点:

痛点:我们在编写 RN 引用时,通常会使用 750 设计稿;而 RN 默认单位是 px,因此我们需要频繁的转换

本工具的目的即解决设计稿转换问题

开始使用

已支持 Typescript

create 方法将实现自动转换 (无需额外配置)

初始化之后,任意 create 里的尺寸数据,自动按照 750 设计稿算

使用 rn-pxtrans 里的 create 替代原有的 StyleSheet.create

内联样式需手动加入

非 create 创建的样式,比如直接在 jsx 直接写的 style,还是需要转换

import { styleTrans } from 'rn-pxtrans'

const Home = () => <View style={styleTrans({ height: 100, width: 100 })}>...</View> 

在内联样式中,也可以只对某个值进行转化,如

import { pxTrans } from 'rn-pxtrans'

const Home = () => <View style={{ height: pxTrans(100), width: 100 }}>...</View> 

如何排除不转换的尺寸

在有些时候,整体需要转换,但个别的属性我们希望使用原始的 px,此时,只需用 noTrans 包裹个别的尺寸即可

import { noTrans, create } from 'rn-pxtrans'
create({
  height: 100,
  width: 100,
  borderRadius: noTrans(2) // 依旧保留 2px
})

同样,在内联里,类似使用

import { styleTrans, noTrans } from 'rn-pxtrans'

const Home = () => (
  <View style={styleTrans({ height: 100, width: 100, borderRadius: noTrans(2) })}>...</View>
)

rn-pxtrans's People

Stargazers

 avatar dyzn0805 avatar  avatar  avatar loveky avatar  avatar

Watchers

James Cloos avatar Wang Yongfeng avatar

Forkers

godkid

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.