Comment définir la taille de la police pour différents périphériques IOS

J'ai écrit le code suivant pour mon projet:

Sur le fichier: multiResolution.js j'ai:

 export function getCorrectFontSizeForScreen(PixelRatio, screenWidth, screenHeight, currentFont){ let devRatio = PixelRatio.get(); let factor = (((screenWidth*devRatio)/320)+((screenHeight*devRatio)/640))/2.0; let maxFontDifferFactor = 5; //the maximum pixels of font size we can go up or down // console.log("The factor is: "+factor); if(factor<=1){ return currentFont-float2int(maxFontDifferFactor*0.3); }else if((factor>=1) && (factor<=1.6)){ return currentFont-float2int(maxFontDifferFactor*0.1); }else if((factor>=1.6) && (factor<=2)){ return currentFont; }else if((factor>=2) && (factor<=3)){ return currentFont+float2int(maxFontDifferFactor*0.65); }else if (factor>=3){ return currentFont+float2int(maxFontDifferFactor); } } function float2int (value) { return value | 0; } 

Ensuite, sur chaque composant réactif-natif, je fais:

 import { PixelRatio } from 'react-native'; import {getCorrectFontSizeForScreen} from './multiResolution' import Dimensions from 'Dimensions'; const {height:h, width:w} = Dimensions.get('window'); // Screen dimensions in current orientation 

Et ensuite sur mes styles je fais:

 var portraitStyles = StyleSheet.create({ titleText: { fontSize: getCorrectFontSizeForScreen(PixelRatio, w,h,27),//magic takes place here }, }); 

C'est personnalisé, mais ça m'a bien fonctionné.

Aussi (sans rapport avec votre question, mais je vais le dire de toute façon), j'utilise des largeurs et des hauteurs pertinentes pour l'écran et la taille de ScreenHeight ainsi:

 aStyleForAnElement:{ //this element will occupy width: w*0.55, //55% of the screen width height:h*0.05 //5% of the screen height } 

C'est ainsi que je supporte différentes tailles d'écran dans mon projet jusqu'à présent.

NOUVELLE RÉPONSE:

Au fil du temps, nous apprenons. Au moment où j'ai écrit cette publication, je n'avais aucune autre solution pour gérer les tailles de police plutôt que d'utiliser un code personnalisé, mais en ce moment je n'ai pas à rien faire:

Je dis simplement à notre concepteur de concevoir pour la résolution la plus basse disponible 320×480 (et me donner les tailles de police en points au lieu de pixels) et puis je n'utilise que des points au lieu de pixels lors de la conception de 320×480.

Tous les écrans au-dessus de 320×480 seront pris en charge automatiquement avec le réacteur natif, je n'ai pas besoin d'écrire TOUT code de fantaisie pour gérer automatiquement cela.

Mes composants ressemblent maintenant à ceci:

 BUTTON_TEXT: { textAlign: 'center', fontSize: 16, // this is 16 points color: 'white', backgroundColor: 'transparent', }, 

Seul un concept, mais j'essayerais de suivre:

 const Dimensions = require('Dimensions'); const Viewport = Dimensions.get('window'); const IPHONE6_WIDTH = 750; // check this, since I'm not sure about iPhone 6 width class YourComponent extends React.Component { constructor(props) { super(props); } getFontSize() { return ({ fontSize: ((Viewport.width * Viewport.scale) === IPHONE6_WIDTH) ? 14 : 16 }); } render() { <View> <Text style={[styles.facebookText, this.getFontSize()]}>Continue with Facebook</Text> </View> } } 

Créez un style commun pour une application. Réutilisez ces propriétés de style par défaut dans tous les composants de style.

Src / common / style.js

 import { Dimensions } from 'react-native'; const { width, height } = Dimensions.get('window'); export const ColorPrimary = '#5CFE48'; export const SmallPhone = () => { if(width<=320) // Here you could use "react-native-device-info" to get device information. return true else return false } 

Dans le style de composant importer le fichier de style commun.

 import { SmallPhone, ColorPrimary } from '../../common/style'; ... ... const styles = StyleSheet.create({ headerLabel: { fontSize: SmallPhone() ? 14:26, color: ColorPrimary } }); 

Vous pouvez également affecter directement une taille de police spécifique à chaque appareil dans le style.js commun et tout simplement appeler la fonction SmallPhone au lieu d'utiliser des opérateurs ternaires.