Package Exports
- react-native-stylesheet-adapt
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-stylesheet-adapt) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-native-stylesheet-adapt
StyleSheet样式表创建,适配各种机型、各种屏幕 与StyleSheet用法一致
安装组件:
npm i --save react-native-stylesheet-adapt
StyleSheetAdapt 样式表创建,适配各种机型、各种屏幕 与StyleSheet用法一致 (方法参数,进入源文件查看,里面详细注解):
StyleSheetAdapt.create();//创建样式表单
StyleSheetAdapt.getStyle();//得到样式属性的json对象
StyleSheetAdapt.designSize = {width:768,height:1024};// 设置页面设计大小 可不设置 默认设计大小12寸平板电脑({width:768,height:1024})
//数字后面可加以下字符 若加字符,加数字后面
//'dw' 获取相对当前屏幕的设计宽比的宽
//'w' 获取相对当前屏幕宽的宽
//'n' 不进行屏幕比缩放
//'dh' 获取相对当前屏幕的设计高比的宽
//'h' 获取相对当前屏幕高比的宽
//如:
const styles = StyleSheetAdapt.create({
testStyle2:{
width:'0.1w',//屏幕宽的10分之1
height:'0.1h',//屏幕高的10分之1
},
testStyle3:{
width:'100dws',//按设计大小宽比适配 会随屏幕调整布局
height:'100dw',//按设计大小宽比适配
},
testStyle:{
transform:[
{rotateX:'180deg'}
],
},
});//创建样式表单
示例
import StyleSheetAdapt from "react-native-stylesheet-adapt";
import React, {Component} from 'react';
import {View} from 'react-native';
StyleSheetAdapt.designSize = {width:768,height:1024};// 设置页面设计大小 可不设置 默认设计大小12寸平板电脑({width:768,height:1024})
const styles = StyleSheetAdapt.create({
testStyle2:{
width:100,
height:200,
},
testStyle:{
transform:[
{rotateX:'180deg'}
],
},
});//创建样式表单
//StyleSheetAdapt.styleJsonAdaptConvert();//样式属性json中的值适配
type Props = {};
export default class Test extends Component<Props> {
constructor(props) {
super(props);
}
alert(){
//与react-native 中的Alert用法一致
Alert.alert();
}
componentWillMount(){
}
componentDidMount() {
}
render() {
const {resultEstimateData,noticesData,resultFinishProgress,
tripListData,customerObj,isNews,pictures,path,dataSize,picture} = this.state;
return (
<View>
<View style={styles.testStyle}></View>
<View style={StyleSheetAdapt.testStyle2}></View>
<View style={StyleSheetAdapt.styleJsonAdaptConvert({
width:100,
height:200,
})}></View>
</View>
);
}
}
欢迎交流
欢迎提问交流;若有bug,请添加bug截图或代码片段,以便更快更好的解决问题。
欢迎大家一起交流