Reagisci dimensione carattere reattivo nativo

Vorrei chiedere come reagisce l'handle nativo o fa il carattere reattivo. Ad esempio in iPhone 4s ho fontSize: 14, mentre in iPhone 6 ho fontSize: 18.

Puoi usare PixelRatio

per esempio:

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

Modificare:

Un altro esempio:

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

Utilizzo:

fontSize: normalize(24)

puoi fare un ulteriore passo avanti consentendo di utilizzare le dimensioni su ogni <Text />componente in base a dimensioni predefinite.

Esempio:

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

Usiamo funzioni utils semplici, dirette e scalabili che abbiamo scritto:

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

Ti fa risparmiare un po 'di tempo facendo molti se. Puoi leggere di più al riguardo nel mio post sul blog .

Poiché al momento le unità reattive non sono disponibili in react-native, direi che la soluzione migliore sarebbe rilevare le dimensioni dello schermo e quindi utilizzarle per dedurre il tipo di dispositivo e impostare fontSize in modo condizionale.

Potresti scrivere un modulo come:

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

Dovrai solo cercare quali sono la larghezza e l'altezza predefinite per ciascun dispositivo. Se la larghezza e l'altezza vengono invertite quando il dispositivo cambia orientamento, potresti essere in grado di utilizzare invece le proporzioni o semplicemente calcolare la minore delle due dimensioni per calcolare la larghezza.

Questo modulo o questo può aiutarti a trovare le dimensioni del dispositivo o il tipo di dispositivo.

Dai un'occhiata alla libreria che ho scritto: https://github.com/tachyons-css/react-native-style-tachyons

Ti permette di specificare una root-fontSize ( rem) all'avvio, che puoi rendere dipendente dalle tue PixelRatioo da altre caratteristiche del dispositivo.

Quindi ottieni stili relativi al tuo rem, non solo fontSize, ma anche imbottiture ecc.:

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

Espansione:

• f5è sempre la dimensione del carattere di base
• pa2 ti dà il riempimento relativo alla dimensione del carattere di base.

Uso semplicemente il rapporto tra le dimensioni dello schermo, che funziona bene per me.

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

Test

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}

Sono riuscito a superare questo problema facendo quanto segue.

1. Scegli la dimensione del carattere che preferisci per la visualizzazione corrente che hai (assicurati che abbia un bell'aspetto per il dispositivo corrente che stai utilizzando nel simulatore).

2. import { Dimensions } from 'react-native' e definire la larghezza all'esterno del componente in questo modo: let width = Dimensions.get('window').width;

3. Ora console.log (larghezza) e annotalo. Se, ad esempio, la dimensione del tuo carattere è 15 e la larghezza è 360, prendi 360 e dividi per 15 (= 24). Questo sarà il valore importante che si adatterà alle diverse dimensioni.

   Usa questo numero nel tuo oggetto stili in questo modo: textFontSize: { fontSize = width / 24 },...

Ora hai un fontSize reattivo.

adjustsFontSizeToFite numberOfLineslavora per me. Regolano le email lunghe in 1 riga.

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

Possiamo usare il layout flessibile e utilizzare AdjustsFontSizeToFit = {true} per dimensioni dei caratteri reattive. E il testo si adatterebbe in base alle dimensioni del contenitore.

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

Ma negli stili è necessario inserire anche un fontsize, solo allora aggiustaFontSizeToFit funzionerà.

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

Recentemente mi sono imbattuto in questo problema e ho finito per utilizzare il foglio di stile reattivo nativo esteso

È possibile impostare il remvalore e condizioni di dimensioni aggiuntive in base alle dimensioni dello schermo. Secondo i documenti:

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

Perché non usare PixelRatio.getPixelSizeForLayoutSize(/* size in dp */);, è proprio lo stesso delle pdunità in Android.

import { Dimensions } from 'react-native';

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

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

fontScaleottieni la scala secondo il tuo dispositivo .

Devo usare questo modo. Ho usato questo e funziona bene.

reattivo-nativo-reattivo-schermo npm installa reattivo-nativo-reattivo-schermo - salva

Proprio come ho 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%")

Funziona per tutti i dispositivi

Un approccio leggermente diverso ha funzionato per me: -

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

Fare riferimento al rapporto pixel in quanto ciò consente di impostare meglio la funzione in base alla densità del dispositivo.

Puoi usare qualcosa di simile.

var {altezza, larghezza} = Dimensions.get ('window'); var textFontSize = larghezza * 0,03;

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

Spero che questo aiuti senza installare librerie di terze parti.