如何在 React Native 中更改按钮字体大小?

Question

如何更改以下按钮的字体大小？将样式属性与 fontSize 一起使用不起作用。

<Button
style={{fontSize: 32}}
uppercase={false}
mode="contained">
Some text
</Button>

Answer 1

React Native Button 的功能非常有限，请参阅 https://facebook.github.io/react-native/docs/button

它没有样式道具，并且您不设置 fontSize。

如果您想对外观进行更多控制，您应该使用TouchableXXXX的组件之一，例如TouchableOpacity它们真的很容易使用：-( 我为你做了一个按钮.希望对您有用

<TouchableOpacity style={{height:50,backgroundColor:"skyblue",alignItems:'center',justifyContent:'center'}}>
<Text style={{fontSize:32,}}>Some Text</Text>
</TouchableOpacity>

Answer 2

我为每个按钮使用 TouchableXXX 中的文本组件，它更灵活且工作正常，您还可以尝试制作自己的按钮组件并传递您想要控制的道具(字体大小、颜色......

<TouchableHighlight onPress={handelPress} style={styles.buttonStyle}>
<Text style={styles.buttonTextStyle}>Click here</Text>
</TouchableHighlight>

Answer 3

如果您使用的是"react-native-elements"按钮，请使用titleStyle来设置字体大小。

import {Input, Button} from 'react-native-elements';
<Button
titleStyle={{
color: "white",
fontSize: 16,
}}
buttonStyle={{
backgroundColor: "white",
borderRadius: 60,
flex: 1,  
}}
title="Click here"
/>

对于 React-native Button，您可以使用 TouchableOpacity。

<TouchableOpacity style={{height:50}}>
<Text style={{fontSize:36}}>Click here</Text>
</TouchableOpacity>