wake-up-neo.net

Reaktive native Responsive-Schriftgröße

Ich würde gerne fragen, wie die native Handlung reagieren oder die responsive Schriftart tun. Zum Beispiel habe ich in iphone 4s fontSize: 14, während ich in iphone 6 fontSize: 18 habe.

34
Sydney Loteria

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),
  },
};
31
chinloong

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 .


Edit: Ich dachte, es wäre hilfreich, diese Funktionen in ein eigenes npm-Paket zu extrahieren, und ich habe auch ScaledSheet in das Paket aufgenommen, eine automatisch skalierte Version von StyleSheet. Sie finden es hier: reag -native-size-matters

23
nirsky

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

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.

4
Isaac Madwed

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

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 .

1
Paras Korat

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.

0
Walter Monecke

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

0
Ahmed M.Kamal

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>
0
Gundam Meister

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

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