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

Question

设备字体大小的放大有时会中断(样式明智).

Answer 1

对于React Native 0.56.0+

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

Answer 2

对于React原生0.58+

最好保留字体缩放,但可以使用Text new prop maxFontSizeMultiplier限制它

对于React原生0.56+使用Levi的答案

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

对于React原生0.55及更低

Text.defaultProps.allowFontScaling=false在应用程序的开头添加(例如main.js或app.js等...),在整个应用程序中对所有Text组件应用此prop.

Answer 3

我有点晚了，但如果有人想用 Typescript 得到答案，这里就是

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

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

Answer 4

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 组件。