如何在IOS和Android应用程序的React Native中禁用字体缩放



设备字体的放大有时会中断(样式)。

禁用字体缩放会损害应用程序的可访问性,如果您想限制使用React native 0.58.0及以上版本的应用程序的缩放,则最好是这样;在特定的Text组件上使用maxFontSizeMultiplier道具。

但是,如果您绝对希望在整个应用程序中禁用字体缩放,可以通过在TextdefaultProps中全局设置allowFontScaling道具来实现。

您应该将这些行放在根入口点(通常为index.js)的AppRegistry.registerComponent之前。

对于React Native 0.56.0+

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

对于React Native的早期版本,您应该只需要第二行,但同时使用这两行不会有什么坏处。第一行只是针对不具有defaultPropsText组件进行保护,这是React Native 0.56.0及以上版本的情况。

在React Native应用程序(通常为index.jsapp.jsmain.js)的入口点文件中添加以上行,以将此道具应用于应用程序中的所有Text组件。

这个道具只会影响Text组件,您可能想对TextInput应用相同的更改,这可以用类似的代码段来完成:

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

还要注意,有些组件不遵守字体缩放设置,例如:AlertPickerIOSDatePickerIOSTabBarIOSSegmentedControlIOS,因为它们都是原生绘制的,不依赖于Text组件。

对于React原生0.58+

喜欢保持字体缩放,但你可以通过使用Text新道具maxFontSizeMultiplier 来限制它

对于React原生0.56+使用李维斯答案

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

对于React原生0.55和更低的

在应用程序的开头添加Text.defaultProps.allowFontScaling=false(例如main.js或app.js等),以便在整个应用程序的所有Text组件上应用此道具。

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

我有点迟到了,但如果有人想用Typescript得到答案,这里是

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

我把这段代码保存在index.js的构造函数中。它确实运行得很好。我使用的是react本机版本0.59.9仅供参考。

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

例如,我的AppText允许执行以下操作:

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

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

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

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

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

如果从react-native-webview导入

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

对于IOS

index.js

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);
if (Text.defaultProps == null) {
Text.defaultProps = {};
Text.defaultProps.allowFontScaling = false;
}

请注意某些组件,如警报选取器IOS日期选取器IOS,以及分段控制IOS

对于Android

import android.content.res.Configuration;
import android.util.DisplayMetrics;
import android.view.WindowManager;
public class MainApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
adjustFontScale(getResources().getConfiguration());
}
private void adjustFontScale(Configuration configuration) {
configuration.fontScale = (float) 1.0;
DisplayMetrics metrics = getResources().getDisplayMetrics();
WindowManager wm = (WindowManager) getSystemService(WINDOW_SERVICE);
wm.getDefaultDisplay().getMetrics(metrics);
metrics.scaledDensity = configuration.fontScale * metrics.density;
getBaseContext().getResources().updateConfiguration(configuration, metrics);
}
}

相关内容

  • 没有找到相关文章