Xcode/Simulator 与物理设备上的 React Native 字体大小不同
React Native font size differs on Xcode/Simulator vs physical device
我一直无法让我的 React Native 应用布局在物理 iPhone 11 Pro 上看起来与在 iPhone 11 Pro 的 iOS 模拟器上看起来一样.具体来说,问题在于文本呈现。两者的字体大小似乎根本不一样。
Xcode 和模拟器是 11.7 版本,iOS 13.7 在 phone 和模拟器上。 React Native 是版本 0.61.5.
由于我无法共享整个屏幕,所以我已裁剪到相关区域。我留下了部分相邻图形以指示 space.
的尺寸
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.
的问题
我的第一直觉是,您可能在物理设备和模拟器上设置了不同的文本大小 and/or 显示缩放。 React Native 的文本组件足够智能,可以根据用户的设置进行缩放,包括 iOS 和 Android.
尝试检查“设置”>“显示与亮度”>“文字大小”中的值
在“设置”>“显示与亮度”>“显示缩放”>“查看”中
希望能解决您的问题!
非常感谢@Jaakko,我也是如此,
但是您可以通过设置文本的 属性 来解决这个问题
<Text .... allowFontScaling ={false}></Text>
保持尺寸标准
或
<Text .... maxFontSizeMultiplier={number} minimumFontScale={number} ></Text>
只允许在不破坏您的设计的情况下进行一定范围的缩放。
祝大家编码愉快。
我一直无法让我的 React Native 应用布局在物理 iPhone 11 Pro 上看起来与在 iPhone 11 Pro 的 iOS 模拟器上看起来一样.具体来说,问题在于文本呈现。两者的字体大小似乎根本不一样。
Xcode 和模拟器是 11.7 版本,iOS 13.7 在 phone 和模拟器上。 React Native 是版本 0.61.5.
由于我无法共享整个屏幕,所以我已裁剪到相关区域。我留下了部分相邻图形以指示 space.
的尺寸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.
的问题我的第一直觉是,您可能在物理设备和模拟器上设置了不同的文本大小 and/or 显示缩放。 React Native 的文本组件足够智能,可以根据用户的设置进行缩放,包括 iOS 和 Android.
尝试检查“设置”>“显示与亮度”>“文字大小”中的值 在“设置”>“显示与亮度”>“显示缩放”>“查看”中
希望能解决您的问题!
非常感谢@Jaakko,我也是如此,
但是您可以通过设置文本的 属性 来解决这个问题
<Text .... allowFontScaling ={false}></Text>
保持尺寸标准
或
<Text .... maxFontSizeMultiplier={number} minimumFontScale={number} ></Text>
只允许在不破坏您的设计的情况下进行一定范围的缩放。
祝大家编码愉快。