我正在尝试在我的React Native应用中更改按钮字体大小,但是出现了错误。有人知道如何正确地做吗? 谢谢。
我正在尝试在我的React Native应用中更改按钮字体大小,但是出现了错误。有人知道如何正确地做吗? 谢谢。
您可以使用带有titleStyle
属性的react-native-elements组件。
import {Input, Button} from 'react-native-elements';
<Button
onPress={this.addPicture}
titleStyle={{
color: "white",
fontSize: 16,
}}
buttonStyle={{
backgroundColor: "white",
borderRadius: 60,
flex: 1,
height: 30,
width: 30,
}}
title="+"
/>
buttonStyle
正常工作了,然后我还得使用一个单独的属性来设置标题...谢谢。 - velkoon很遗憾,根据文档(https://reactnative.dev/docs/button),您不能改变按钮的字体大小。您可以更改的唯一样式属性是color
。
<Button
onPress={onPressLearnMore}
title="Learn More"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/>
Touchable
中没有使用Text
元素:import React from 'react';
import { TouchableWithoutFeedback, Text } from 'react-native';
export default function ComponentName() {
return (
<TouchableWithoutFeedback>
<Text style={{ fontSize: 24 }}>Button Text</Text>
</TouchableWithoutFeedback>
);
}
以下是我对使用 TouchableOpacity
和 Text
轻松样式化按钮的解决方案:
import React, { Component } from 'react';
import { View, StyleSheet, TouchableOpacity, Text } from "react-native";
export default class CustomButton extends Component {
render(){
return (
<View style={styles.container}>
/* Custom Button */
<TouchableOpacity
style={styles.customBtnBG}
onPress={() => {}}
>
<Text style={styles.customBtnText}>Button</Text>
</TouchableOpacity>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center"
},
/* Here style the text of your button */
customBtnText: {
fontSize: 40,
fontWeight: '400',
color: "#fff",
},
/* Here style the background of your button */
customBtnBG: {
backgroundColor: "#007aff",
paddingHorizontal: 30,
paddingVertical: 5,
borderRadius: 30
}
});
<View>
<Button
style={{
backgroundColor: "#FE434C",
borderColor: "transparent",
borderRadius: 20,
width: 250
}}
textStyle={{ color: "#FFFFFF", fontSize: 20 }}
>
Hello
</Button>
</View>
你可以使用TouchableHighlight
、TouchableOpacity
和TouchableNativeFeedback
来创建自定义按钮。
import {TouchableHighlight,TouchableOpacity,TouchableNativeFeedback }from 'react-native'
何时使用TouchableNativeFeedback、TouchableHighlight或TouchableOpacity?