React Native中如何修改按钮背景色与文字颜色

React Native 内置的 Button 组件样式定制能力较弱，没法直接修改背景色和文字颜色（仅能通过 color 属性修改文字/边框颜色，且不同平台表现不一致）。要实现白色背景+蓝色文字的按钮，推荐用 TouchableOpacity 配合 Text 自定义按钮，这样能完全掌控样式。

修改后的完整代码 #

import React, { useState } from 'react';
import { Text, View, StyleSheet, SafeAreaView, TextInput, TouchableOpacity } from 'react-native';
import socketServices from './src/utils/socketService';


const App = () => {

    const [message, setmessage] = useState('')
    const [data, setData] = useState([])
    
    // 按钮点击逻辑
    const handleSend = () => {
        console.log('发送消息:', message);
        // 这里可以添加socket发送逻辑，比如 socketServices.send(message)
        setmessage('');
    }

    return (
        <SafeAreaView style={{flex:3}}>
            <View style={styles.container}>
                <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
                    <View style={{flex:0.8, marginRight: 8}}> 
                        <TextInput
                            value={message}
                            placeholder='Enter Your Message'
                            style={styles.inputStyle}
                            onChangeText={text => setmessage(text)}
                        />
                    </View>
                    <View style={{flex:0.2}}>
                        {/* 自定义Send按钮 */}
                        <TouchableOpacity style={styles.sendButton} onPress={handleSend}>
                            <Text style={styles.sendButtonText}>Send</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        </SafeAreaView>
    );

};

const styles = StyleSheet.create({
    container: {
        flex: 3,
        padding: 24
    },
    inputStyle: {
        height: 42,
        borderWidth: 3,
        borderRadius: 6,
        paddingHorizontal: 8
    },
    sendButton: {
        backgroundColor: 'white',
        borderWidth: 1, // 加蓝色边框和输入框风格统一
        borderColor: 'blue',
        borderRadius: 6,
        height: 42,
        justifyContent: 'center',
        alignItems: 'center'
    },
    sendButtonText: {
        color: 'blue',
        fontSize: 16,
        fontWeight: '500'
    }
});

export default App;

关键修改说明 #

• 替换内置 Button 为 TouchableOpacity：这是React Native常用的可点击容器，支持全量自定义样式，跨平台表现一致。
• 新增 sendButton 样式：设置白色背景、蓝色边框（和输入框视觉统一），圆角和高度匹配输入框尺寸。
• 新增 sendButtonText 样式：将文字颜色设为蓝色，调整字体大小和粗细优化视觉效果。
• 添加 handleSend 函数：处理按钮点击的发送逻辑，可在此调用socket服务发送消息。

如果一定要用内置 Button 组件（不推荐，平台兼容性差），仅能修改文字/边框颜色，背景色无法通过内置属性调整：

<Button 
    title='Send' 
    color='blue' // 仅修改文字和边框颜色
/>

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