Reagieren Sie auf native Responsive-Schriftgröße

Ich möchte fragen, wie das native Handle reagiert oder wie die responsive Schriftart funktioniert. Zum Beispiel in iPhone 4s habe ich Schriftgröße: 14, während ich in iPhone 6 Schriftgröße: 18 habe.

Sie können PixelRatio verwenden

zum Beispiel:

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

Bearbeiten:

Ein anderes Beispiel:

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

Verwendung:

fontSize: normalize(24)

Sie können noch einen Schritt weiter gehen, indem Sie zulassen, dass für alle <Text />Komponenten Größen mit vordefinierten Größen verwendet werden .

Beispiel:

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

Wir verwenden eine einfache, unkomplizierte, skalierende Utils-Funktion, die wir geschrieben haben:

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

Spart Ihnen Zeit bei vielen Wenns. Sie können mehr darüber in meinem Blog-Beitrag lesen .

Da Responsive Units derzeit nicht in React-Native verfügbar sind, ist es am besten, die Bildschirmgröße zu ermitteln und daraus den Gerätetyp abzuleiten und die Schriftgröße bedingt festzulegen.

Sie könnten ein Modul schreiben wie:

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

Sie müssen nur die Standardbreite und -höhe für jedes Gerät nachschlagen. Wenn Breite und Höhe umgedreht werden, wenn das Gerät die Ausrichtung ändert, können Sie möglicherweise stattdessen das Seitenverhältnis verwenden oder einfach die kleinere der beiden Dimensionen ermitteln, um die Breite zu ermitteln.

Dieses oder dieses Modul kann Ihnen bei der Suche nach Geräteabmessungen oder Gerätetyp helfen.

Schauen Sie sich die Bibliothek an, die ich geschrieben habe: https://github.com/tachyons-css/react-native-style-tachyons

Sie können rembeim Start eine root-fontSize ( ) angeben , die Sie von Ihren PixelRatiooder anderen Geräteeigenschaften abhängig machen können .

Dann erhalten Sie Stile relativ zu Ihrer rem, nicht nur Schriftgröße, sondern auch Auffüllungen usw.:

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

Erweiterung:

• f5ist immer Ihre Basisschriftgröße
• pa2 gibt Ihnen Auffüllung relativ zu Ihrer Basisschriftgröße.

Ich benutze einfach das Verhältnis der Bildschirmgröße, was für mich gut funktioniert.

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

Prüfung

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}

adjustsFontSizeToFitund numberOfLinesarbeitet für mich. Sie passen lange E-Mails in eine Zeile an.

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

Ich habe es geschafft, dies zu überwinden, indem ich Folgendes tat.

1. Wählen Sie die gewünschte Schriftgröße für die aktuelle Ansicht (Stellen Sie sicher, dass sie für das aktuelle Gerät, das Sie im Simulator verwenden, gut aussieht).

2. import { Dimensions } from 'react-native' und definieren Sie die Breite außerhalb der Komponente wie folgt: let width = Dimensions.get('window').width;

3. Nun console.log (width) und notiere es dir. Wenn Ihre gut aussehende Schriftgröße 15 und Ihre Breite beispielsweise 360 ​​beträgt, nehmen Sie 360 ​​und dividieren Sie durch 15 (= 24). Dies wird der wichtige Wert sein, der an verschiedene Größen angepasst werden soll.

   Verwenden Sie diese Nummer in Ihrem Stilobjekt wie folgt: textFontSize: { fontSize = width / 24 },...

Jetzt haben Sie eine reaktionsfähige Schriftgröße.

Wir können das Flex-Layout verwenden und adjustsFontSizeToFit = {true} für reaktionsfähige Schriftgrößen verwenden. Und der Text wird entsprechend der Größe des Containers angepasst.

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

In Stilen müssen Sie jedoch auch eine Schriftgröße einfügen. Erst dann funktioniert die Anpassung von FontSizeToFit.

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

Ich bin kürzlich auf dieses Problem gestoßen und habe schließlich das native Stylesheet "React-Native" verwendet

Sie können Ihren remWert und zusätzliche Größenbedingungen basierend auf der Bildschirmgröße festlegen . Gemäß den Dokumenten:

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

Warum nicht verwenden PixelRatio.getPixelSizeForLayoutSize(/* size in dp */);, es ist genau das gleiche wie pdEinheiten in Android.

import { Dimensions } from 'react-native';

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

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

fontScaleHolen Sie sich die Waage gemäß Ihrem Gerät .

Müssen auf diese Weise verwenden Ich habe diese verwendet und es funktioniert gut.

React-Native-Responsive-Screen npm Installieren React-Native-Responsive-Screen - Speichern

Genau wie ich ein Gerät 1080x1920 habe

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%")

Es funktioniert für alle Geräte

Ein etwas anderer Ansatz hat bei mir funktioniert:

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

Beziehen Sie sich auf das Pixelverhältnis, da Sie so die Funktion basierend auf der Gerätedichte besser einrichten können.

Sie können so etwas verwenden.

var {height, width} = Dimensions.get ('Fenster'); var textFontSize = width * 0.03;

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

Ich hoffe, dies hilft, ohne Bibliotheken von Drittanbietern zu installieren.