react-native开发

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)
    }
});

具体网址:https://github.com/nirsky/react-native-size-matters

上一篇 下一篇

猜你喜欢

热点阅读