Reagieren Sie auf native Responsive-Schriftgröße

90

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.

Sydney Loteria
quelle
19
Wenn jemand nach einer Möglichkeit sucht, die Skalierung von Schriftarten vollständig zu deaktivieren, verwenden SieText.defaultProps.allowFontScaling=false
CoderDave
1
@CoderDave das ist genial!
Abdo
Wenn Sie eine relative Schriftgröße basierend auf der Bildschirmgröße anstelle einer exakten Schriftgröße wünschen , können Sie npmjs.com/package/react-native-responsive-dimensions ausprobieren. Die Größe Ihrer Schriftarten wird automatisch basierend auf der Bildschirmgröße des Geräts geändert
Dani Akash

Antworten:

97

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),
  },
};
Chinloong
quelle
22
Wo haben Sie hier Ihre konstante Skala verwendet?
Jan Franz Palngipang
2
Das scheint nichts zu bewirken. Mini immer === 12
A.com
14
Warum subtrahieren Sie 2 für Nicht-iOS-Geräte?
Parth Tamane
51

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 .


Bearbeiten: Ich dachte, es könnte hilfreich sein, diese Funktionen in ein eigenes npm-Paket zu extrahieren. Ich habe es auch ScaledSheetin das Paket aufgenommen, das eine automatisch skalierte Version von ist StyleSheet. Sie finden es hier: React-Native-Size-Angelegenheiten .

Nirsky
quelle
Vielen Dank, was ist das beste Szenario, um diese Dienstprogramme zu verwenden? Ich meine, wo Skalierung, vertikale Skalierung und moderate Skalierung verwendet werden sollen?
Pir Shukarullah Shah
4
Ich verwende moderateScale für fast alles, was skaliert werden muss, wie Schriftgröße, Ränder, Bild und SVG-Größe (für das Layout verwende ich Flex), da die Imo-Skalierung nicht linear sein sollte, aber das ist eine persönliche Präferenz. Wenn Sie ein lineares Ergebnis erzielen möchten, verwenden Sie hauptsächlich Skalierung und VerticalScale für Elemente wie Containerhöhen.
Nirsky
16

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.

Isaac Madwed
quelle
Ich habe das React-Native-Gerät installiert, aber es gibt mir den Fehler "Modul Dimension kann nicht aufgelöst werden", wenn ich die App ausführe
Sydney Loteria
Klingt so, als müssten Sie sicherstellen, dass Sie die richtige Version von RN für das Modul verwenden
Isaac Madwed
Ich verwende die neueste Version von React Native :) Ich denke, es wird derzeit nicht unterstützt?
Sydney Loteria
Möglicherweise ... Vielleicht versuchen Sie Ihr node_modules Ordner und wieder zu entfernennpm install
Isaac Madwed
6

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.
Fabian Zeindl
quelle
5

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}
Shentaoy
quelle
Bedeutet dies, dass Sie den iPhone 6 Simulator verwenden müssen und basierend darauf, wie er dort aussieht, auf anderen Geräten gut aussehen wird?
Walter Monecke
@WalterMonecke in meinem Fall ja. Sie können sich auch anpassen, um einen anderen Simulator als Basis zu verwenden.
Shentaoy
4

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>
Gundam Meister
quelle
10
Laut Dokumentation gilt 'adjustsFontSizeToFit' nur für iOS
mdehghani
Dies funktioniert nicht für Android
Samantha Withanage
3

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.

Walter Monecke
quelle
Hey, funktioniert es wirklich? f1 = width / (width / size) das kann nicht funktionieren?
Elrond
1
Am Ende habe ich verwendet react-native-text.
Walter Monecke
3

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',
},
Payel Dutta
quelle
2

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
});
colakollektiv
quelle
2

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

Ahmed Kamal
quelle
2
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 .

Paras Korat
quelle
fontscale gibt auf dem virtuellen Android Emulator 4_WVGA_Nexus_S_API-Gerät, das ich verwende, nur 1 zurück.
Reggie3
0

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

Tushar Kumawat
quelle
0

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.

Arpan Sharma
quelle
-3

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.

Guna Sekhar
quelle
1
und woher kam 0.03?
David Noreña
wird es reagieren?
Deepak Ganachari