Question

我们正在构建一个应用程序，它将在多个设备（iOS，Android）上运行，因此可以在许多屏幕尺寸上运行。在阅读PixelRatio后，它似乎仍然没有像根据不同的屏幕尺寸自动缩放所有样式值的神奇解决方案。

我能想到的唯一解决方案是覆盖Stylesheet类，根据当前屏幕大小自动缩放所有尺寸。例如：

import {StyleSheet} from ‘react-native’;
import { Dimensions, Platform, PixelRatio } from ‘react-native’;

const {
    width,
    height
} = Dimensions.get(‘window’);

const scale = width / 320;

const ratioKeys = {
    fontSize: true,
    paddingHorizontal: true,
    paddingVertical: true,
    paddingTop: true,
    paddingLeft: true,
    paddingRight: true,
    paddingBottom: true,
    padding: true,
    marginHorizontal: true,
    marginVertical: true,
    marginTop: true,
    marginRight: true,
    marginLeft: true,
    marginBottom: true,
    margin: true,
    width: true,
    height: true,
    lineHeight: true,
}

// automatically scale specific keys (specified above) according to the screen size
const parseKey = (key, value) => {

   if (ratioKeys[key]) {
        value = value * scale;
    }

   return value;
}

export const parseStyle = (style) => {
    console.log(‘style -> ’, style);
    return Object.keys(style).reduce((output, key) => {
        output[key] = parseKey(key, style[key]);
        return output;
    }, {});
}

const parseStyleSheet = (styles) => {
    console.log(‘styles -> ’, styles);
    return Object.keys(styles).reduce((output, key) => {
       output[key] = parseStyle(styles[key]);
       return output;
    }, {});
}

export default {
    create: (style) => {
        return StyleSheet.create(parseStyleSheet(style));
    }
}

看起来很奇怪，这实际上并不是开箱即用的，所以我想我错过了什么？

Answer 1

我已经看到这个库是一个解决方案，它支持媒体查询，如果我们觉得我们需要比flexbox更多的自定义，我们最终可能会使用它。我已经看到了它的实际效果，看起来它可能会满足您的一些需求：https://github.com/vitalets/react-native-extended-stylesheet

针对不同的屏幕尺寸实现原生风格的响应

1 个答案: