react-native - 如何在 React Native 中更改按钮字体大小？

Question

如何更改以下按钮的字体大小？将 style 属性与 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

它没有 style 属性，你也没有设置 fontSize。

如果您想更好地控制外观，您应该使用 TouchableXXXX 的组件之一，例如 TouchableOpacity 它们真的很容易使用 :-) 我已经为您制作了一个按钮。希望它对你有用

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

Answer 2

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

 <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>