我正在尝试创建一个带有加号图标的简单浮动操作栏按钮,并且在某些边缘情况下难以将“加号”真正居中。我只是在<Text>
中使用'\ uFF0B',但是试图切换到react-native-vector-icons
,却发现他们也使用字体而不是图像来支持<Icon>
实例,并且我的问题似乎仍然存在。
在大多数屏幕和设备上都很好用,但在某些情况下,用户报告加号图标不是完全居中。我有一个假设,它可能涉及用户的可访问性选项,增加应用程序中超出父视图大小的字体大小。无论如何,我可以通过将fontSize
设置为大于lineHeight
来重现像人们与我分享的屏幕截图。假设这是问题 -
你如何将单个字形置于<Text>
(或<Icon>
,因为它来自<Text>
)的视图范围内,即使fontSize
可能比<Text>
的lineHeight
甚至整个height
大得多?
在下面的示例中,“+”字体大小正好是行高的两倍,因此加号在视图区域的右上角居中显示,就像它期望在一个112dp的框中一样x 112dp;但是我想把它放在56dp x 56dp盒子的中心位置,而是用加号的手臂裁剪。没有样式属性的组合似乎影响它,而只是控制<Icon>
在其父级内的位置。
目前:
一般:
对于超大字体:
码:
<View style={s.fabStyle}>
<TouchableOpacity onPress={()=>{this.onPlus()}}>
<Icon name="plus" style={s.fabText} />
</TouchableOpacity>
</View>
...
const s = StyleSheet.create({
fabStyle: {
position: 'absolute',
right: 16,
bottom: 16,
borderRadius: 28,
width: 56,
height: 56,
backgroundColor: styleConstants.color.primary,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
textAlign: 'center',
},
fabText: {
position: 'relative',
left: 0,
top: 0,
right: 0,
bottom: 0,
fontSize: 112,
color: '#fff',
textAlign: 'center',
lineHeight: 56,
width: 56,
height: 56,
},
});
这不是问题本身的答案,它仍然存在,但是对于潜在问题的答案,以防有人通过谷歌搜索来到这里与类似的问题。在我的情况下,确实存在可访问性设置导致字体比设计大的情况,从而触发上述情况。虽然我仍然不知道如何在这种情况下充分集中文本,但在我的情况下,可以通过确保allowFontScaling=false
保存文本的相关视图来避免这个问题。