Question

扩大设备字体的大小有时会破坏（样式化）。

Answer 1

对于React Native 0.56.0 +

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

Answer 2

对于React native 0.58 +

最好保留字体缩放，但可以使用Text new prop maxFontSizeMultiplier

来限制它

对于React原生0.56+使用Levi's answer

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

对于React原生0.55及更低

在应用的开头添加Text.defaultProps.allowFontScaling=false（例如main.js或app.js等...），以便在整个应用中对所有Text组件应用此道具。

Answer 3

When user increase full font size from setting

设备字体大小的放大不会中断（样式方面）。

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

另请注意，某些组件不会遵循字体缩放设置，例如：Alert、PickerIOS、DatePickerIOS、TabBarIOS、SegmentedControlIOS，因为这些都是原生绘制的，不依赖于 Text 组件。

Answer 4

创建一个<AppText>组件，并将其与您的预设（而不是原始预设）一起使用，并使用您自己的默认值，包括字体缩放为false。这样比较好，因为您可以使用自己的API丰富它。

例如，我的AppText允许执行以下操作：

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

Answer 5

在另一个文件中，将实际的Text组件导入ScaledText作为备份，然后重新定义Text，从而覆盖allowFontScaling道具。

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

然后，导入您本地定义的Text组件，而不是内置的React Native Text。如果只想优雅地在应用程序的某些部分上禁用字体缩放，这也很有用。

Answer 6

对于 webview，如果字体大小从移动设置更改，我们可以使用 textZoom={100} 属性来处理字体大小更改。

如果从 react-native-webview 导入

<WebView
    textZoom={100}
    source={}/>

Answer 7

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

我将这段代码保留在index.js的构造函数中。它确实运行良好。我正在使用React本机版本0.59.9仅供参考。

如何在React Native for IOS应用程序中禁用字体缩放？

7 个答案: