无论用户字体大小如何，如何使文本适合按钮？

Question

我有一个标题非常适合我 phone 的按钮，但我从其他字体较大的人那里收到了一些问题，由于按钮背景太小，文本被裁剪了。

我以为是因为我用了width和height带字面量，所以改成百分比，结果还是报错。如何调整按钮大小以在任何设备上正确显示文本？

这是我的按钮

button: {
  backgroundColor: blue,
  justifyContent: 'center',
  padding: 9,
  borderRadius: 5,
  marginTop: 10,
  width: '40%',
  height: '10%',
},

这就是我的使用方式

<View style={styles.button}>
  <Ionicons.Button
    name="alarm"
    size={20}
    color="white"
    onPress={showTimepicker}
    backgroundColor={'transparent'}>
    <Text style={styles.notifsText}>Definir horario de Notificaciones</Text>
  </Ionicons.Button>
</View>

这是它在我的 phone 上的样子

我朋友的 phone 上是这样的

Answer 1

width和height作为百分比是指继承parent大小的百分比，所以按钮将保持相同大小，相应的 parent 未更改其大小。尝试删除这些属性以允许按钮采用其全部可用大小。

Answer 2

试试这个

<Text allowFontScaling={false}>example </Text>

Answer 3

发生这种情况是因为 allowFontScaling 的默认值是 true 这就是为什么它在不同的地方保持不同 phone.You 可以传递 allowFontScaling={false} 作为解决这个问题的道具

Answer 4

您也可以使用 vw 或 vh 作为字体大小的单位。通过一些计算，你会得到一个合适的解决方案。

无论用户字体大小如何，如何使文本适合按钮？

How can i make a text fit in a button regardless of the user font size?

javascript

mobile

android

react-native

expo