Gibt es eine Möglichkeit, eine Ansicht in reaktionseigener Umgebung zu skalieren?

Question

Ich habe eine View in Reaktion nativ mit ein paar Komponenten. Während alles auf dem iPhone 6 und 5 korrekt angezeigt wird, wird beim Betrachten auf einem iPhone 4s der Boden einer der Komponenten leicht abgeschnitten.

Ich sehe es gibt Möglichkeiten, Base64-Symbole zu skalieren. Gibt es eine Möglichkeit, einen gesamten Container zu skalieren, um einheitlich kleiner oder größer zu sein?

Answer 1

Hilft Ihnen so etwas?

YourStyleSheet.js

import {StyleSheet} from 'react-native'; 
var Dimensions = require('Dimensions'); 
var {width, height} = Dimensions.get('window'); 


export function create(styles: Object): {[name: string]: number} { 
    const platformStyles = {}; 
    Object.keys(styles).forEach((name) => { 
    let {sm,md,lg, ...style} = {...styles[name]}; 
    // iphone 4s and older 
    if(sm && width < 375){ 

     style = {...style, ...sm}; 
    } 
    // iphone 5,5s 
    if(md && width >= 375 && width <414){ 

     style = {...style, ...md}; 
    } 
    // iphone 6 and bigger 
    if(lg && width >= 414){ 

     style = {...style, ...lg}; 
    } 


    platformStyles[name] = style; 
    }); 
    return StyleSheet.create(platformStyles); 
} 

Dann in Ihrem Stil Sie die Größe der Komponente auf unterschiedlichen Bildschirmgrößen wie diese

import YourStyleSheet from './path/YourStyleShett'  
const styles = YourStyleSheet.create({ 
     component:{ 
     sm:{fontSize: 20,}, 
     md:{fontSize: 30,}, 
     lg:{fontSize: 30,}, 
     textAlign: 'center', 
     marginBottom: 10, 
     fontWeight:'bold', 
     color:colors.white, 
     } 
    });