Reaktive native Responsive-Schriftgröße

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

Verwendungszweck:

fontSize: normalize(24)

sie können noch einen Schritt weiter gehen, indem Sie zulassen, dass Größen für jede <Text />-Komponente mit vordefinierter Größe 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 einfache, unkomplizierte Skalierungsfunktionen, 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 viel Zeit, wenn Sie viele Ifs machen. Mehr dazu erfahren Sie auf meinem Blogbeitrag .

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

Damit können Sie beim Start ein root-fontSize (rem) angeben, das Sie von Ihrer PixelRatio oder anderen Geräteeigenschaften abhängig machen können.

Dann erhalten Sie Stile relativ zu Ihrer rem, nicht nur fontSize, sondern auch Auffüllungen usw.:

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

Expansion:

• f5ist immer Ihre Basis-Schriftgröße
• pa2 gibt relativ zum Basis-Schriftgrad einen Abstand ein.

Da responsive Units derzeit nicht in reaktiver Form zur Verfügung stehen, würde ich sagen, dass Sie die Bildschirmgröße am besten ermitteln und dann den Gerätetyp ableiten und die Schriftgröße bedingt festlegen.

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 stattdessen das Seitenverhältnis verwenden oder einfach die geringere der beiden Dimensionen ermitteln, um die Breite herauszufinden.

Dieses Modul oder dieses kann Ihnen helfen, Geräteabmessungen oder Gerätetypen zu finden.

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}

importiere {Dimensions} aus 'reag-native';

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

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

fontScale skalieren wie auf Ihrem Gerät .

Es gelang mir, dies durch folgende Maßnahmen zu überwinden.

1. Wählen Sie die gewünschte Schriftgröße für die aktuelle Ansicht aus (stellen Sie sicher, dass es 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 schreibe es auf. Wenn Ihre gut aussehende Größe 15 ist und Ihre Breite beispielsweise 360 ​​ist, nehmen Sie 360 ​​und Durch 15 teilen (= 24). Dies wird der wichtige Wert sein, der an verschiedene Größen angepasst wird.

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

Jetzt haben Sie eine responsive fontSize.

Warum verwenden Sie nicht PixelRatio.getPixelSizeForLayoutSize(/* size in dp */);, es ist genau dasselbe wie pd-Einheiten in Android.

adjustsFontSizeToFit und numberOfLines funktionieren 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 bin vor kurzem auf dieses Problem gestoßen und habe am Ende reag-native-extended-stylesheet

Sie können Ihren rem-Wert und zusätzliche Größenbedingungen basierend auf der Bildschirmgröße einstellen. Wie in 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
});

Wir können das Flex-Layout verwenden und adjustsFontSizeToFit = {true} für responsive Schriftgrößen verwenden. Der Text passt sich der Größe des Containers an.

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

Aber in Styles müssen Sie auch eine Schriftgröße setzen, nur dann wird adjustsFontSizeToFit funktionieren.

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