React Native 字體大小在 Xcode/Simulator 與物理設備上有所不同

Question

我一直無法讓我的 React Native 應用程序布局在物理 iPhone 11 Pro 上看起來與在 iPhone 11 Pro 的 iOS 模擬器上看起來一樣。 具體來說，問題在於文本渲染。 兩者的字體大小似乎根本不同。

Xcode 和 Simulator 是 11.7 版本，而 iOS 13.7 是在手機和模擬器上。 React Native 是 0.61.5 版本。

由於我無法共享整個屏幕，因此我已裁剪到相關區域。 我留下了相鄰圖形的一部分以指示空間的尺寸。

iPhone 11 Pro 模擬器渲染：

iPhone 11 Pro 設備渲染：

RN視圖：

    <View style={styles.container}>
      <Image source={require('./assets/tophalf.jpg')}
          style={{width: '100%', height: '50%'}}
          imageStyle={{resizeMode: 'contain'}} />
      <View style={styles.container2}>
      <View style={{flex:1}} />
      <View style={{flex:8}}>
          <View style={{flex:4, alignSelf:'center', width: '85%'}}>
            <Text style={styles.aboutfont}>{loremtext}</Text>
          </View>
          <View style={{flex:2}}>
            <Image source={require('./assets/blob.png')}
                  style={{flex:1, width:'50%', height:'50%', alignSelf: 'flex-end'}}
                  resizeMode="contain" />
          </View>
          <View style={{flex:1}} />
        </View>
      </View>
      <Image source={require('./assets/middlebox.png')}
        style={{position:'absolute', alignItems: 'center',
                width:100, height:100,
                borderWidth:1, borderColor:'#eeeeee', borderRadius:5,
                aspectRatio:1}}
      />
    </View>

和樣式元素：

  container: {
    flex: 1,
    backgroundColor: '#ffffff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  container2: {
    flex: 1,
    backgroundColor: 'white',
    justifyContent: 'space-around',
  },
  aboutfont: {
    fontSize: 14,
    fontFamily: Platform.OS === 'ios' ? 'Futura' : 'Roboto',
    color: 'black',
    textAlign: 'center',
  },

任何幫助，將不勝感激。 我不太清楚這是一個 React Native 問題，還是 Xcode/Simulator 的問題。

Answer 1

我的第一個直覺是，您可能對物理設備和模擬器上的文本大小和/或顯示縮放有不同的設置。 React Native 的文本組件足夠智能，可以根據用戶的設置進行擴展，無論是在 iOS 還是 Android 上。

嘗試檢查設置 > 顯示和亮度 > 文本大小和設置 > 顯示和亮度 > 顯示縮放 > 查看中的值

希望能解決你的問題！