異なるスクリーンサイズに対応するネイティブスタイルの応答性

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

私はこのライブラリをソリューションとして見てきました。メディアクエリをサポートしています。フレックスボックスよりもカスタマイズが必要な場合は、最終的に使用するかもしれません。私は実際にそれを見て、それはあなたのニーズの一部に対処するかもしれないように見えます：https://github.com/vitalets/react-native-extended-stylesheet