设备字体的放大有时会中断(样式方面)。
yk9xbfzb1#
禁用字体缩放可能会损害应用的可访问性,理想情况下,如果你想限制使用React native 0.58.0及以上版本的应用的缩放;在特定的Text组件上使用maxFontSizeMultiplier属性。但是,如果您绝对希望在整个应用程序中禁用字体缩放,则可以通过在Text的defaultProps中全局设置allowFontScaling属性来实现。您应该将这些行放在根入口点(通常为index.js)的AppRegistry.registerComponent之前。对于React Native 0.56.0+
Text
maxFontSizeMultiplier
defaultProps
allowFontScaling
index.js
AppRegistry.registerComponent
Text.defaultProps = Text.defaultProps || {}; Text.defaultProps.allowFontScaling = false;
对于React Native的早期版本,你应该只需要第二行,但两者都有不会有什么坏处。第一行只是防止没有defaultProps的Text组件,这是React Native 0.56.0及更高版本的情况。在React Native应用程序的入口点文件(通常是index.js,app.js或main.js)中添加上述行,将此prop应用于应用程序中的所有Text组件。这个prop只会影响Text组件,你可能想对TextInput应用相同的更改,这可以通过类似的代码片段来完成:
app.js
main.js
TextInput
TextInput.defaultProps = TextInput.defaultProps || {}; TextInput.defaultProps.allowFontScaling = false;
另外请注意,有些组件不会遵守字体缩放设置,例如:Alert、PickerIOS、DatePickerIOS、TabBarIOS、SegmentedControlIOS,因为这些都是本机绘制的,不依赖于Text组件。
Alert
PickerIOS
DatePickerIOS
TabBarIOS
SegmentedControlIOS
bjg7j2ky2#
对于React native 0.58+最好保持字体缩放,但您可以使用Text new prop maxFontSizeMultiplier限制它对于React native 0.56+,使用Levi's answer
对于React native 0.55及更低版本在应用程序的开头添加Text.defaultProps.allowFontScaling=false(例如main.js或app.js等),以便在整个应用程序的所有文本组件上应用此prop。
Text.defaultProps.allowFontScaling=false
qoefvg9y3#
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} />
ryhaxcpt4#
if (Text.defaultProps == null) { Text.defaultProps = {}; Text.defaultProps.allowFontScaling = false; }
我把这段代码保存在index.js的构造函数中。它运行得很好。顺便说一句,我使用的是react原生版本0.59.9。
0.59.9
2jcobegt5#
我有点晚了,但如果有人想用打字机得到答案,这就是
interface TextWithDefaultProps extends Text { defaultProps?: { allowFontScaling?: boolean }; } (Text as unknown as TextWithDefaultProps).defaultProps = { ...((Text as unknown as TextWithDefaultProps).defaultProps || {}), allowFontScaling: false, };
insrf1ej6#
创建一个<AppText>组件,并将其与您的预设一起使用,而不是原始的预设,使用您自己的默认值,包括字体缩放false。这更好,因为您可以使用自己的API来丰富它。例如,我的AppText许可证可以执行以下操作:<AppText id="some.translation.key" color="primary" size="l" underline italic bold/>
<AppText>
<AppText id="some.translation.key" color="primary" size="l" underline italic bold/>
oo7oh9g97#
在另一个文件中,将实际的Text组件导入为ScaledText,作为备份,然后重新定义Text,覆盖allowFontScaling属性。
ScaledText
export function Text(props) { return <ScaledText {...props} allowFontScaling={false} />; }
然后,导入本地定义的Text组件,而不是内置的React Native Text。如果你想仅在应用的某些部分优雅地禁用字体缩放,这也很有用。
zf2sa74q8#
对于webview,我们可以使用textZoom={100} props来处理字体大小更改,如果字体大小从移动的设置更改。如果从react-native-webview导入
textZoom={100}
react-native-webview
<WebView textZoom={100} source={}/>
bybem2ql9#
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; }
请注意,Alert、PickerIOS、DatePickerIOS、TabBarIOS、SegmentedControlIOS等部分组件不会遵循字体缩放设置,因为它们是原生绘制的,不依赖于Text组件。
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); } }
9条答案
按热度按时间yk9xbfzb1#
禁用字体缩放可能会损害应用的可访问性,理想情况下,如果你想限制使用React native 0.58.0及以上版本的应用的缩放;在特定的
Text
组件上使用maxFontSizeMultiplier
属性。但是,如果您绝对希望在整个应用程序中禁用字体缩放,则可以通过在
Text
的defaultProps
中全局设置allowFontScaling
属性来实现。您应该将这些行放在根入口点(通常为
index.js
)的AppRegistry.registerComponent
之前。对于React Native 0.56.0+
对于React Native的早期版本,你应该只需要第二行,但两者都有不会有什么坏处。第一行只是防止没有
defaultProps
的Text
组件,这是React Native 0.56.0及更高版本的情况。在React Native应用程序的入口点文件(通常是
index.js
,app.js
或main.js
)中添加上述行,将此prop应用于应用程序中的所有Text
组件。这个prop只会影响
Text
组件,你可能想对TextInput
应用相同的更改,这可以通过类似的代码片段来完成:另外请注意,有些组件不会遵守字体缩放设置,例如:
Alert
、PickerIOS
、DatePickerIOS
、TabBarIOS
、SegmentedControlIOS
,因为这些都是本机绘制的,不依赖于Text
组件。bjg7j2ky2#
对于React native 0.58+
最好保持字体缩放,但您可以使用Text new prop maxFontSizeMultiplier限制它
对于React native 0.56+,使用Levi's answer
对于React native 0.55及更低版本
在应用程序的开头添加
Text.defaultProps.allowFontScaling=false
(例如main.js或app.js等),以便在整个应用程序的所有文本组件上应用此prop。qoefvg9y3#
设备字体的放大不会中断(样式方面)。
另外请注意,有些组件不会遵守字体缩放设置,例如:Alert、PickerIOS、DatePickerIOS、TabBarIOS、SegmentedControlIOS,因为这些都是本机绘制的,不依赖于Text组件。
ryhaxcpt4#
我把这段代码保存在
index.js
的构造函数中。它运行得很好。顺便说一句,我使用的是react原生版本0.59.9
。2jcobegt5#
我有点晚了,但如果有人想用打字机得到答案,这就是
insrf1ej6#
创建一个
<AppText>
组件,并将其与您的预设一起使用,而不是原始的预设,使用您自己的默认值,包括字体缩放false。这更好,因为您可以使用自己的API来丰富它。例如,我的AppText许可证可以执行以下操作:
<AppText id="some.translation.key" color="primary" size="l" underline italic bold/>
oo7oh9g97#
在另一个文件中,将实际的
Text
组件导入为ScaledText
,作为备份,然后重新定义Text
,覆盖allowFontScaling
属性。然后,导入本地定义的
Text
组件,而不是内置的React NativeText
。如果你想仅在应用的某些部分优雅地禁用字体缩放,这也很有用。zf2sa74q8#
对于webview,我们可以使用
textZoom={100}
props来处理字体大小更改,如果字体大小从移动的设置更改。如果从
react-native-webview
导入bybem2ql9#
IOS版本
index.js
请注意,Alert、PickerIOS、DatePickerIOS、TabBarIOS、SegmentedControlIOS等部分组件不会遵循字体缩放设置,因为它们是原生绘制的,不依赖于Text组件。
Android版