React-native 響應式字體大小

Question

我正在使用 Expo 和 React-Native 開發平板電腦應用程序（Android 和 iOS）。

我設法使布局具有響應性而沒有遇到任何問題。 在不同大小的設備上運行該應用程序后，我注意到我忘記了字體大小響應能力。

我嘗試了我能找到的所有 npm 庫（ react-native-responsive-fontsize 、 react-native-cross-platform-responsive-dimensions 、 react-native-responsive-fontsize ）。 對於其中任何一個，我都遇到了同樣的問題：在應用程序啟動時，根據設備的方向，字體大小呈現不同。 （即，如果我在縱向模式下打開應用程序時，字體大小明顯大於在橫向模式下打開應用程序時的字體大小 - 橫向模式是我的應用程序的默認方向）。 我試圖在啟動時將我的應用程序的屏幕方向鎖定為橫向，並在我的第一個組件安裝后將其重置為默認值，但這也無濟於事。

我得出的結論是，發生這種情況是因為所有這些庫都使用設備的尺寸來制作我傳遞給它們的內容的 procentual 值，但只涉及一個維度（寬度或高度），這些維度因初始設備方向而異。

我試圖實現我自己的解決方案，考慮基於寬度和高度的東西，而不僅僅是基於其中之一，我想出了這個功能：

const height = Dimensions.get('window').height;
const width = Dimensions.get('window').width;

export function proportionalSize(size) {
     let aspectRatioSize = width * height;
     let aspectRatioUnit = aspectRatioSize * 0.00001;

     return parseFloat(size) * 0.1 * aspectRatioUnit;
}

這僅適用於我開發應用程序的設備......字體大小不會在具有不同屏幕尺寸的其他設備上保持相同的比例。

我浪費了足夠多的時間來修改整個代碼的字體大小，試圖在庫之間切換。 你有什么想法我怎么能克服這個，或者我錯過了什么？ 我最初教過這將是我最小的問題，但我錯了。

后來的編輯：我注意到我的問題在重新加載應用程序后消失了。 它只在第一次渲染時發生，重新加載后，字體大小工作得很好。

Answer 1

你可以使用這個功能

import { Dimensions, Platform, PixelRatio } from 'react-native';

const {
  width: SCREEN_WIDTH,
  height: SCREEN_HEIGHT,
} = Dimensions.get('window');

// based on iphone 5s's scale
const scale = SCREEN_WIDTH / 320;

export function actuatedNormalize(size) {
  const newSize = size * scale
  if (Platform.OS === 'ios') {
    return Math.round(PixelRatio.roundToNearestPixel(newSize))
  } else {
    return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 2
  }
}

並使用

fontSize: actuatedNormalize(12)

Answer 2

我認為基礎計算已關閉......我無法在手機和平​​板電腦之間清晰地縮放所以我更改了計算以使用基於width / height的縱橫比......這將其修復為在上完全相同兩個設備。

import { Dimensions, Platform, PixelRatio } from 'react-native';

const {
  width,
  height,
} = Dimensions.get('window');

export function normalize(size, multiplier = 2) {
  const scale = (width / height) * multiplier;

  const newSize = size * scale;

  return Math.round(PixelRatio.roundToNearestPixel(newSize));
}

Answer 3

最好的方法是擁有 2 個比例，一個用於手機，另一個用於平板電腦