React Native Responsive Schriftgröße

Question

Ich möchte fragen, wie reagieren native Handle oder die reaktionsfähige Schriftart. Zum Beispiel in iphone 4s ich habe fontSize: 14, während in iphone 6 habe ich fontSize: 18.

Answer 1

Da responsive Einheiten sind nicht verfügbar in react-native im Moment, würde ich sagen, Ihre beste Wette wäre zu erkennen die Bildschirmgröße und verwenden Sie diese, um den Gerätetyp abzuleiten und die fontSize bedingt zu setzen.

Sie könnten ein Modul wie schreiben:

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

Sie müssen nur schauen, was die Standard-Breite und Höhe für jedes Gerät sind. Wenn Breite und Höhe gedreht 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.

Diese oder this one kann Ihnen helfen, Geräteabmessungen oder Gerätetypen zu finden.

Answer 2

können Sie PixelRatio

verwenden, zB:

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

Edit:

Ein weiteres 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) { 
    if (Platform.OS === 'ios') { 
    return Math.round(PixelRatio.roundToNearestPixel(size)) 
    } else { 
    return Math.round(PixelRatio.roundToNearestPixel(size)) - 2 
    } 
} 

Verbrauch:

fontSize: normalize(24) 

können Sie noch einen Schritt weiter gehen, indem Sie die Größen für jede <Text /> Komponente mit vordefinierter Größe verwenden.

Beispiel:

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

Answer 3

Werfen Sie einen Blick auf die Bibliothek, die ich schrieb: https://github.com/tachyons-css/react-native-style-tachyons

Es ermöglicht Ihnen, eine Wurzelsize (rem) beim Start zu spezifizieren, die Sie abhängig von Ihren PixelRatio machen oder andere Geräteeigenschaften.

Dann erhalten Sie Stile in Bezug auf Ihre rem, nicht nur Schriftgröße, sondern Polsterungen usw. auch:

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

Expanation:

• f5 ist immer die Basis-Schriftgröße
• pa2 gibt Ihnen Padding relativ zu Ihrer Basisschriftgröße.

Answer 4

Wir verwenden eine einfache, geradlinig, Skalierung utils Funktionen schrieben wir:

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 einige Zeit viele ifs tun. Sie können mehr darüber auf my blog post lesen.

---

Edit: Ich dachte, es könnte hilfreich sein, diese Funktionen zu ihren eigenen Npm-Paket zu extrahieren, fügte ich auch ScaledSheet in das Paket, das eine automatisch skalierte Version von StyleSheet ist. Sie können es hier finden: react-native-size-matters.

Answer 5

Ich schaffte es, dies zu überwinden, indem Sie Folgendes tun.

1. die Schriftgröße Wählen Sie für die aktuelle Ansicht wie Sie haben (Stellen Sie sicher, es für das aktuelle Gerät sieht gut aus Sie in der Simulator verwenden).

2. import { Dimensions } from 'react-native' und definieren die Breite Außenseite des Bauteils in etwa so: let width = Dimensions.get('window').width;

3. Jetzt console.log (Breite) und notieren. Wenn Ihre gut aussehende Schrift Größe 15 ist und Ihre Breite 360 ​​ist, dann nehmen Sie 360 ​​und dividieren durch 15 (= 24). Dies wird der wichtige Wert sein, den an verschiedene Größen anpassen wird.

   Verwenden Sie diese Nummer in Ihrer Stile wie so widersprechen: textFontSize: { fontSize = width/24 },...

Jetzt haben Sie eine ansprechende size.