React原生视图在iPhone Plus上显示扭曲像素

反应原生视图显示iPhone Plus版本中的扭曲像素，而同一视图在iPhone 5,6或7版本上显示得非常优雅。某些时候的视图看起来更加糟糕，那么下面的图片就是iPhone的加号版本。代码如下，React原生视图在iPhone Plus上显示扭曲像素

<View style={[styles.headerRow, { paddingHorizontal: 5 }]} > 
    <View style={{ flex: 3, borderColor: theme.color.gray.light, borderRightWidth: .5, alignSelf: 'center' }}> 
     <Text style={[skin.text.smaller, skin.text.bold, { textAlign: 'center', padding: 8 }]}>{'TITLE'}</Text> 
    </View> 
    <View style={{ flex: 2, alignItems: 'center', borderColor: theme.color.gray.light, borderRightWidth: .5, alignSelf: 'center' }}> 
     <Text style={[skin.text.smaller, skin.text.bold, { textAlign: 'center', padding: 8 }]}>{'BUCKIT'}</Text> 
    </View> 
    <View style={{ flex: 2.8, alignItems: 'center' }}> 
     <Text style={[skin.text.smaller, skin.text.bold, { textAlign: 'center', padding: 8 }]}>{'YOUR AVERAGE'}</Text> 
    </View> 
</View>

使用屏幕宽度DIVID柱代替挠性也不会有帮助。

来源

2017-12-02 Eltaf

SOLUTION：

我发现一种解决方案，iOS不喜欢设定边框宽度小于1，从而既可以使用1或更大值或反应天然提供称为hairlineWidth StylesSheet变量，其具有设定为0.3的默认值。您可以通过在组件的构造函数中设置StyleSheet.hairlineWidth = 0.5来更改该值。

<View style={{borderWidth: StyleSheet.hairlineWidth}}> ... </View>

来源

2017-12-02 19:25:19 Eltaf

React原生视图在iPhone Plus上显示扭曲像素

回答

相关问题