react native 處理iOS和安卓系統文字

非常簡單的幾步 讓 react native app不隨系統文字變化的處理

ios 處理方法如下 ：

1. 新增addCustomProps.js （位置隨意放到專案目錄， 只要路徑引用的到） 下面是 addCustomProps.js 的內容

/**
 * 新增元件的的自定義屬性
 * @param WrapComponent 元件
 * @param customProps 預設屬性
 */
export default function addCustomProps(WrapComponent, customProps) {
	const componentRender = WrapComponent.prototype.render
	const componentDefaultProps = WrapComponent.prototype.constructor.defaultProps
	WrapComponent.prototype.constructor.defaultProps = {
		...componentDefaultProps,
		...customProps
	}
	WrapComponent.prototype.render = function render() {
		const oldProps = this.props

		this.props = {
			...this.props,
			style: [customProps.style, oldProps.style]
		}
		return componentRender.apply(this)
	}
}
複製程式碼

2. 在你app的入口檔案里加上如下內容 (⚠️注意 是入口檔案 ，否則可能不起作用)

import React, { Component } from 'react'
import { Text, TextInput } from 'react-native'

// 處理iOS系統文字
addCustomProps(Text, {allowFontScaling: false});
addCustomProps(TextInput, {allowFontScaling: false});
複製程式碼

ios 端完成， 你可以試著修改系統的文字大小實驗

android 處理方法如下 ：

在 MainApplication.java 檔案中加入如下程式碼：

import android.content.res.Configuration;
import android.content.res.Resources;

  @Override
  public void onConfigurationChanged(Configuration newConfig) {
    if (newConfig.fontScale != 1) // 非預設值
      getResources();
    super.onConfigurationChanged(newConfig);
  }

  @Override
  public Resources getResources() {
    Resources res = super.getResources();
    if (res.getConfiguration().fontScale != 1) { // 非預設值
      Configuration newConfig = new Configuration();
      newConfig.setToDefaults(); // 設定預設
      res.updateConfiguration(newConfig, res.getDisplayMetrics());
    }
    return res;
  }
複製程式碼

android 端也完成了