React Native中修改Button字体大小报错，求正确实现方法

Hey there! I’ve dealt with this exact frustration before—React Native’s default Button component is super limited when it comes to styling text properties like font size, which is why you’re hitting an error trying to set it directly. Let me walk you through the right ways to handle this:

Option 1: Build a Custom Button with TouchableOpacity + Text #

This is the most common and flexible approach, since it gives you full control over every part of the button’s styling. Here’s a quick example:

import { TouchableOpacity, Text, StyleSheet } from 'react-native';

// Use this in your component
<TouchableOpacity 
  style={styles.buttonContainer} 
  onPress={() => console.log("Button pressed!")}
>
  <Text style={styles.buttonText}>My Custom Button</Text>
</TouchableOpacity>

// Define your styles
const styles = StyleSheet.create({
  buttonContainer: {
    backgroundColor: '#4CAF50',
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 8,
  },
  buttonText: {
    fontSize: 18, // Set your desired font size here
    color: 'white',
    textAlign: 'center',
    fontWeight: '500',
  },
});

Option 2: Use Pressable (React Native 0.63+) #

If you want even more control over state (like pressed states), Pressable is a great modern alternative:

import { Pressable, Text, StyleSheet } from 'react-native';

<Pressable 
  style={styles.buttonContainer} 
  onPress={() => console.log("Pressed!")}
>
  {({ pressed }) => (
    <Text style={[
      styles.buttonText, 
      pressed && styles.pressedText // Adjust style when pressed
    ]}>
      Press Me
    </Text>
  )}
</Pressable>

const styles = StyleSheet.create({
  buttonContainer: {
    backgroundColor: '#2196F3',
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 4,
  },
  buttonText: {
    fontSize: 20,
    color: 'white',
    textAlign: 'center',
  },
  pressedText: {
    opacity: 0.7,
  },
});

Why the Default Button Fails #

The default Button component in React Native only lets you style its container with the style prop—it has no built-in way to customize the text inside (like font size). Any attempt to pass text-related styles directly will throw an error because those props aren’t supported.

For simple, unstyled buttons, the default Button works, but once you need custom text sizes or colors, building your own is the reliable solution.

内容的提问来源于stack exchange，提问作者webprogramming13