美文网首页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