React Native Responsive Font Size

Me gustaría preguntar cómo reacciona el manejo nativo o la fuente receptiva. Por ejemplo, en el iphone 4s tengo fontSize: 14, mientras que en el iphone 6 tengo fontSize: 18.

Puedes usar PixelRatio

por ejemplo:

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
  }
});

Editar:

Otro ejemplo:

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
  }
}

Uso:

fontSize: normalize(24)

puede ir un paso más allá al permitir que se usen tamaños en cada <Text />componente por tamaño predefinido.

Ejemplo:

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

Usamos funciones de utilidad de escalado simples y directas que escribimos:

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};

Le ahorra algo de tiempo haciendo muchos si. Puedes leer más sobre esto en la publicación de mi blog .

Debido a que las unidades receptivas no están disponibles en react-native en este momento, diría que su mejor opción sería detectar el tamaño de la pantalla y luego usarlo para inferir el tipo de dispositivo y establecer fontSize condicionalmente.

Podrías escribir un módulo como:

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

Solo necesitará buscar cuál es el ancho y alto predeterminados para cada dispositivo. Si el ancho y el alto se invierten cuando el dispositivo cambia de orientación, es posible que pueda usar la relación de aspecto en su lugar o simplemente calcular la menor de las dos dimensiones para calcular el ancho.

Este módulo o este puede ayudarlo a encontrar las dimensiones o el tipo de dispositivo.

Eche un vistazo a la biblioteca que escribí: https://github.com/tachyons-css/react-native-style-tachyons

Le permite especificar un root-fontSize ( rem) al inicio, que puede hacer que dependa de sus características PixelRatioo de otras características del dispositivo.

Luego obtienes estilos relativos a tu rem, no solo fontSize, sino también paddings, etc.

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

Ampliación:

• f5es siempre tu tamaño de fuente base
• pa2 le da relleno en relación con su tamaño de fuente base.

Simplemente utilizo la proporción del tamaño de la pantalla, que funciona bien para mí.

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));

Prueba

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}

adjustsFontSizeToFity numberOfLinestrabaja para mi. Ajustan el correo electrónico largo en una línea.

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

Me las arreglé para superar esto haciendo lo siguiente.

1. Elija el tamaño de fuente que desee para la vista actual que tiene (asegúrese de que se vea bien para el dispositivo actual que está utilizando en el simulador).

2. import { Dimensions } from 'react-native' y defina el ancho fuera del componente así: let width = Dimensions.get('window').width;

3. Ahora console.log (ancho) y anótalo. Si su tamaño de fuente atractivo es 15 y su ancho es 360, por ejemplo, tome 360 ​​y divida por 15 (= 24). Este será el valor importante que se ajustará a diferentes tamaños.

   Use este número en su objeto de estilos así: textFontSize: { fontSize = width / 24 },...

Ahora tienes un fontSize receptivo.

Podemos usar un diseño flexible y usar adjustsFontSizeToFit = {true} para tamaños de fuente receptivos. Y el texto se ajustaría de acuerdo con el tamaño del contenedor.

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

Pero en los estilos también debe poner un tamaño de fuente, solo entonces ajustará el tamaño de fuente para ajustar.

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

Recientemente me encontré con este problema y terminé usando react-native-extended-stylesheet

Puede establecer su remvalor y condiciones de tamaño adicionales según el tamaño de la pantalla. Según los documentos:

// 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
});

Por qué no usarlo PixelRatio.getPixelSizeForLayoutSize(/* size in dp */);, es lo mismo que las pdunidades en Android.

import { Dimensions } from 'react-native';

const { width, fontScale } = Dimensions.get("window");

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

fontScaleObtenga escala según su dispositivo .

Necesito usarlo de esta manera. He usado este y está funcionando bien.

react-native-responsive-screen npm install react-native-responsive-screen --save

Al igual que tengo un dispositivo 1080x1920

The vertical number we calculate from height **hp**
height:200
200/1920*100 = 10.41% - height:hp("10.41%")


The Horizontal number we calculate from width **wp**
width:200
200/1080*100 = 18.51% - Width:wp("18.51%")

Funciona para todos los dispositivos

Un enfoque ligeramente diferente funcionó para mí: -

const normalize = (size: number): number => {
  const scale = screenWidth / 320;
  const newSize = size * scale;
  let calculatedSize = Math.round(PixelRatio.roundToNearestPixel(newSize))

  if (PixelRatio.get() < 3)
    return calculatedSize - 0.5
  return calculatedSize
};

Consulte la relación de píxeles, ya que esto le permite configurar mejor la función según la densidad del dispositivo.

Puedes usar algo como esto.

var {altura, ancho} = Dimensions.get ('ventana'); var textFontSize = ancho * 0.03;

inputText: {
    color : TEXT_COLOR_PRIMARY,
    width: '80%',
    fontSize: textFontSize
}

Espero que esto ayude sin instalar bibliotecas de terceros.