Wie deaktiviere ich die Schriftskalierung in der React Native für IOS- und Android-App?

Die Vergrößerung der Geräteschriftart funktioniert manchmal nicht (in Bezug auf das Design).

Das Deaktivieren der Schriftartenskalierung kann die Zugänglichkeit Ihrer App beeinträchtigen, idealerweise, wenn Sie die Skalierung für Apps einschränken möchten, die React Native 0.58.0 und höher verwenden; Benutze die maxFontSizeMultiplier Stütze auf konkret Text Komponenten.

Wenn Sie die Schriftskalierung jedoch unbedingt in Ihrer gesamten Anwendung deaktivieren möchten, können Sie dies tun, indem Sie dies global festlegen allowFontScaling Stütze im defaultProps von Text.

Sie sollten diese Zeilen in Ihrem Root-Einstiegspunkt platzieren (normalerweise). index.js) Vor AppRegistry.registerComponent.

Für React Native 0.56.0+

Text.defaultProps = Text.defaultProps || {};
Text.defaultProps.allowFontScaling = false;

Für frühere Versionen von React Native sollten Sie nur die zweite Zeile benötigen, aber beides zu haben schadet nicht. Die erste Zeile schützt nur vor dem Text Komponente nicht mit defaultProps Dies ist bei React Native 0.56.0 und höher der Fall.

Fügen Sie die obigen Zeilen in die Einstiegspunktdatei Ihrer React Native-Anwendung ein (normalerweise index.js, app.js oder main.js), um diese Requisite auf alle anzuwenden Text Komponenten in Ihrer Anwendung.

Diese Requisite wirkt sich nur aus Text Komponenten, auf die Sie möglicherweise die gleichen Änderungen anwenden möchten TextInput was mit einem ähnlichen Snippet möglich ist:

TextInput.defaultProps = TextInput.defaultProps || {};
TextInput.defaultProps.allowFontScaling = false;

Beachten Sie außerdem, dass einige Komponenten die Schriftartskalierungseinstellungen nicht befolgen, zum Beispiel: Alert, PickerIOS, DatePickerIOS, TabBarIOS, SegmentedControlIOS da diese alle nativ gezeichnet sind und sich nicht auf das verlassen Text Komponente.

Für React native 0.58+

Es ist vorzuziehen, die Schriftskalierung beizubehalten, Sie können sie jedoch einschränken, indem Sie „Text new prop“ verwenden maxFontSizeMultiplier

Verwenden Sie für React Native 0.56+ die Antwort von Levi

Text.defaultProps = Text.defaultProps || {};
Text.defaultProps.allowFontScaling = false;

Für React native 0,55 und niedriger

Hinzufügen Text.defaultProps.allowFontScaling=false am Anfang der App (z. B. main.js oder app.js usw.), um diese Requisite auf alle Textkomponenten in der gesamten App anzuwenden.

When user increase full font size from setting 

Die Vergrößerung der Geräteschriftart wird nicht beeinträchtigt (in Bezug auf das Styling).

index.js file


import {AppRegistry} from 'react-native';
import App from './src/App';
import {name as appName} from './app.json';
import {Text, TextInput} from 'react-native';

AppRegistry.registerComponent(appName, () => App);

//ADD this 
if (Text.defaultProps == null) {
    Text.defaultProps = {};
    Text.defaultProps.allowFontScaling = false;
}

if (TextInput.defaultProps == null) {
    TextInput.defaultProps = {};
    TextInput.defaultProps.allowFontScaling = false;
}

<CalendarStrip
    shouldAllowFontScaling={false}
/>

Beachten Sie außerdem, dass einige Komponenten die Schriftartskalierungseinstellungen nicht befolgen, zum Beispiel: Alert, PickerIOS, DatePickerIOS, TabBarIOS, SegmentedControlIOS, da diese alle nativ gezeichnet werden und nicht auf der Textkomponente basieren.

Ich bin etwas spät dran, aber wenn jemand eine Antwort mit Typescript möchte, hier ist sie

interface TextWithDefaultProps extends Text {
  defaultProps?: { allowFontScaling?: boolean };
}

(Text as unknown as TextWithDefaultProps).defaultProps = {
   ...((Text as unknown as TextWithDefaultProps).defaultProps || {}),
   allowFontScaling: false,
 };

 if (Text.defaultProps == null) {
            Text.defaultProps = {};
            Text.defaultProps.allowFontScaling = false;
        }

Ich habe diesen Code im Konstruktor von behalten index.js.Es hat wirklich gut funktioniert. Ich verwende die native React-Version 0.59.9 Zu Ihrer Information.

Erstelle ein <AppText> Komponente und verwenden Sie sie mit Ihren Voreinstellungen anstelle des Originals, mit Ihren eigenen Standardeinstellungen, einschließlich falscher Schriftskalierung. Das ist besser, weil Sie es mit Ihrer eigenen API anreichern können.

Zum Beispiel erlaubt mein AppText Dinge wie:

<AppText id="some.translation.key" color="primary" size="l" underline italic bold/>

Importieren Sie die aktuelle Datei in eine andere Datei Text Komponente als ScaledText Also als Backup, und dann neu definieren Textüberschreibt die allowFontScaling Stütze.

export function Text(props) {
  return <ScaledText {...props} allowFontScaling={false} />;
}

Importieren Sie dann Ihre lokal definierten Text Komponente anstelle des integrierten React Native Text. Dies ist auch nützlich, wenn Sie die Schriftskalierung nur für bestimmte Teile Ihrer App elegant deaktivieren möchten.