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.
ios
reactjs
react-native
Sydney Loteria
quelle
quelle
Text.defaultProps.allowFontScaling=false
Antworten:
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), }, };
quelle
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
ScaledSheet
in das Paket aufgenommen, das eine automatisch skalierte Version von istStyleSheet
. Sie finden es hier: React-Native-Size-Angelegenheiten .quelle
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.
quelle
npm install
Schauen Sie sich die Bibliothek an, die ich geschrieben habe: https://github.com/tachyons-css/react-native-style-tachyons
Sie können
rem
beim Start eine root-fontSize ( ) angeben , die Sie von IhrenPixelRatio
oder 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.:Erweiterung:
f5
ist immer Ihre Basisschriftgrößepa2
gibt Ihnen Auffüllung relativ zu Ihrer Basisschriftgröße.quelle
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}
quelle
adjustsFontSizeToFit
undnumberOfLines
arbeitet 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>
quelle
Ich habe es geschafft, dies zu überwinden, indem ich Folgendes tat.
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).
import { Dimensions } from 'react-native'
und definieren Sie die Breite außerhalb der Komponente wie folgt:let width = Dimensions.get('window').width;
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.
quelle
react-native-text
.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.
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', },
quelle
Ich bin kürzlich auf dieses Problem gestoßen und habe schließlich das native Stylesheet "React-Native" verwendet
Sie können Ihren
rem
Wert 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 });
quelle
Warum nicht verwenden
PixelRatio.getPixelSizeForLayoutSize(/* size in dp */);
, es ist genau das gleiche wiepd
Einheiten in Android.quelle
import { Dimensions } from 'react-native'; const { width, fontScale } = Dimensions.get("window"); const styles = StyleSheet.create({ fontSize: idleFontSize / fontScale, });
fontScale
Holen Sie sich die Waage gemäß Ihrem Gerät .quelle
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
quelle
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.
quelle
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.
quelle