【发布时间】：2021-01-15 10:47:15
【问题描述】：
我一直无法让我的 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 的问题。
【问题讨论】：
-
您知道您是否在设备或模拟器上更改了字体大小？你可以看到如何做到这一点here。我之前在自己的项目中不得不调整大小:)
-
@FredAstaire 确认我没有在设备或模拟器上更改它。
-
啊啊啊我很笨。请参阅我对已接受答案的评论。
标签： ios xcode react-native font-size