web-dev-qa-db-fra.com

Réaction de la taille de la police réactive native

Je voudrais demander comment réagissent natif gérer ou faire la police sensible. Par exemple, dans l'iphone 4s, j'ai FontSize: 14, alors que dans l'iphone 6, j'ai FontSize: 18.

iosreactjsreact-native
34
Sydney Loteria

Vous pouvez utiliser PixelRatio

par exemple:

var React = require('react-native');

var {StyleSheet, PixelRatio} = React;

var FONT_BACK_LABEL   = 18;

if (PixelRatio.get() <= 2) {
  FONT_BACK_LABEL = 14;
}

var styles = StyleSheet.create({
  label: {
    fontSize: FONT_BACK_LABEL
  }
});

Modifier:

Un autre exemple:

import { Dimensions, Platform, PixelRatio } from 'react-native';

const {
  width: SCREEN_WIDTH,
  height: SCREEN_HEIGHT,
} = Dimensions.get('window');

// based on iphone 5s's scale
const scale = SCREEN_WIDTH / 320;

export function normalize(size) {
  const newSize = size * scale 
  if (Platform.OS === 'ios') {
    return Math.round(PixelRatio.roundToNearestPixel(newSize))
  } else {
    return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 2
  }
}

Usage:

fontSize: normalize(24)

vous pouvez aller plus loin en permettant aux tailles d'être utilisées sur chaque composant <Text /> par une taille prédéfinie.

Exemple:

const styles = {
  mini: {
    fontSize: normalize(12),
  },
  small: {
    fontSize: normalize(15),
  },
  medium: {
    fontSize: normalize(17),
  },
  large: {
    fontSize: normalize(20),
  },
  xlarge: {
    fontSize: normalize(24),
  },
};
31
chinloong

Nous utilisons une simple, simple, mise à l'échelle des fonctions utils nous avons écrit:

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

//Guideline sizes are based on standard ~5" screen mobile device
const guidelineBaseWidth = 350;
const guidelineBaseHeight = 680;

const scale = size => width / guidelineBaseWidth * size;
const verticalScale = size => height / guidelineBaseHeight * size;
const moderateScale = (size, factor = 0.5) => size + ( scale(size) - size ) * factor;

export {scale, verticalScale, moderateScale};

Vous fait gagner du temps en faisant beaucoup de si. Vous pouvez en savoir plus à ce sujet sur mon blog .

Édition: J'ai pensé qu'il pourrait être utile d'extraire ces fonctions dans leur propre paquet npm, j'ai également inclus ScaledSheet dans le paquet, qui est une version automatiquement mise à l'échelle de StyleSheet. Vous pouvez le trouver ici: réagit-natif-taille-questions . 

23
nirsky

Jetez un oeil à la bibliothèque que j'ai écrite: https://github.com/tachyons-css/react-native-style-tachyons

Il vous permet de spécifier une taille de fonte racine (rem) au démarrage, que vous pouvez subordonner à votre PixelRatio ou à d’autres caractéristiques du périphérique.

Ensuite, vous obtenez des styles relatifs à votre rem, pas seulement fontSize, mais aussi les rembourrages, etc.:

<Text style={[s.f5, s.pa2, s.tc]}>
     Something
</Text>

Expanation:

  • f5est toujours votre taille de base
  • pa2 vous donne un rembourrage relatif à votre taille de base.
5
Fabian Zeindl

Étant donné que les unités réactives ne sont pas disponibles en mode réactif natif pour le moment, je dirais que votre meilleur choix serait de détecter la taille de l'écran, puis de l'utiliser pour déduire le type de périphérique et définir la taille de police font conditionnellement.

Vous pourriez écrire un module comme: 

function fontSizer (screenWidth) {
  if(screenWidth > 400){
    return 18;
  }else if(screenWidth > 250){
    return 14;
  }else { 
    return 12;
  }
}

Vous aurez juste besoin de rechercher quelles sont la largeur et la hauteur par défaut pour chaque périphérique. Si la largeur et la hauteur sont inversées lorsque l’appareil change d’orientation, vous pourrez peut-être utiliser le format de l’image ou simplement calculer la plus petite des deux dimensions pour déterminer la largeur.

Ce module ou celui-ci peut vous aider à trouver les dimensions ou le type d'appareil.

4
Isaac Madwed

J'utilise simplement le ratio de la taille de l'écran, ce qui me convient parfaitement.

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

// Use iPhone6 as base size which is 375 x 667
const baseWidth = 375;
const baseHeight = 667;

const scaleWidth = width / baseWidth;
const scaleHeight = height / baseHeight;
const scale = Math.min(scaleWidth, scaleHeight);

export const scaledSize =
    (size) => Math.ceil((size * scale));

Tester

const size = {
    small: scaledSize(25),
    oneThird: scaledSize(125),
    fullScreen: scaledSize(375),
};

console.log(size);

// iPhone 5s
{small: 22, oneThird: 107, fullScreen: 320}
// iPhone 6s
{small: 25, oneThird: 125, fullScreen: 375}
// iPhone 6s Plus
{small: 28, oneThird: 138, fullScreen: 414}
3
shentaoy

importer {Dimensions} de 'react-native';

const {width, fontScale } = Dimensions.get ("fenêtre");

const styles = StyleSheet.create ({ fontSize: idleFontSize/ fontScale , });

fontScale obtenir une échelle en fonction de votre appareil .

1
Paras Korat

J'ai réussi à surmonter cela en procédant comme suit.

  1. Choisissez la taille de police de votre choix pour la vue actuelle (assurez-vous que it convient bien au périphérique que vous utilisez dans le simulateur ).

  2. import { Dimensions } from 'react-native' et définissez la largeur en dehors du composant comme suit: let width = Dimensions.get('window').width;

  3. Maintenant, console.log (largeur) et notez-le. Si votre belle police Taille est de 15 et votre largeur de 360 ​​par exemple, prenez 360 et Divisez par 15 (= 24). Cela va être la valeur importante qui va être ajustée à différentes tailles.

    Utilisez ce numéro dans votre objet styles comme suit: textFontSize: { fontSize = width / 24 },...

Vous avez maintenant une fontSize sensible.

0
Walter Monecke

Pourquoi ne pas utiliser PixelRatio.getPixelSizeForLayoutSize(/* size in dp */);, c’est la même chose que les unités pd sous Android.

0
Ahmed M.Kamal

adjustsFontSizeToFit et numberOfLines fonctionne pour moi. Ils ajustent les longs emails en 1 ligne.

<View>
  <Text
    numberOfLines={1}
    adjustsFontSizeToFit
    style={{textAlign:'center',fontSize:30}}
  >
    {this.props.email}
  </Text>
</View>
0
Gundam Meister

J'ai récemment rencontré ce problème et fini par utiliser react-native-extended-stylesheet

Vous pouvez définir votre valeur rem et des conditions de taille supplémentaires en fonction de la taille de l'écran. Selon les docs:

// component
const styles = EStyleSheet.create({
  text: {
    fontSize: '1.5rem',
    marginHorizontal: '2rem'
  }
});
// app entry
let {height, width} = Dimensions.get('window');
EStyleSheet.build({
  $rem: width > 340 ? 18 : 16
});
0
colakollektiv

Nous pouvons utiliser flex layout et utiliser ajustsFontSizeToFit = {true} pour les tailles de police réactives.

     <Text
    adjustsFontSizeToFit
    style={styles.valueField}>{value}
    </Text>

Mais dans les styles, vous devez également définir une taille de police. Dans ce cas, le travail est ajusté par FontsizeToFit.

    valueField: {
    flex: 3,
    fontSize: 48,
    marginBottom: 5,
    color: '#00A398',
},
0
Payel Dutta