react-native适配ui第三方库
2021-01-20 本文已影响0人
朱传武
npm install react-native-size-matters --save
一个越南小伙推荐的用起来很不错,可以保持在不同尺寸的屏幕上显示效果一致,具体用法:
内联样式里面用法:
import { s, vs, ms, mvs } from 'react-native-size-matters';
<View style={{
width: s(30),
height: vs(50),
padding: ms(5)
}}/>;
在样式里面的用法:
import { ScaledSheet } from 'react-native-size-matters';
const styles = ScaledSheet.create({
container: {
width: '100@s', // = scale(100)
height: '200@vs', // = verticalScale(200)
padding: '2@msr', // = Math.round(moderateScale(2))
margin: 5
},
row: {
padding: '10@ms0.3', // = moderateScale(10, 0.3)
width: '50@ms', // = moderateScale(50)
height: '30@mvs0.3' // = moderateVerticalScale(30, 0.3)
}
});