React Native 字体大小在 Xcode/模拟器与物理设备上不同

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 上的用户设置进行扩展。

尝试检查“设置”>“显示和亮度”>“文本大小”和“设置”>“显示和亮度”>“显示缩放”>“查看”中的值

希望能解决您的问题！