美文网首页react-native开发
react-native适配ui第三方库

react-native适配ui第三方库

作者: 朱传武 | 来源:发表于2021-01-20 01:50 被阅读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

相关文章

网友评论

    本文标题:react-native适配ui第三方库

    本文链接:https://www.haomeiwen.com/subject/nfehzktx.html