React Native按钮按压时无法变色问题求助（附代码）

你的代码核心问题出在样式数组的写法上：当isPressed为false时，isPressed && styles.buttonPressed会返回布尔值false，而React Native的样式数组无法正确解析布尔值，这会干扰样式合并逻辑，导致按压状态下的样式无法生效。

修复方式一：用三元表达式替换逻辑与 #

将样式数组中的逻辑与改为三元表达式，确保始终返回样式对象或null（null会被React Native忽略）：

style={[styles.button, isPressed ? styles.buttonPressed : null]}

修复后的完整代码：

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

const MyButton = () => {
  const [isPressed, setIsPressed] = React.useState(false);

  const handlePressIn = () => {
    setIsPressed(true);
  };

  const handlePressOut = () => {
    setIsPressed(false);
  };

  return (
    <TouchableOpacity
      onPressIn={handlePressIn}
      onPressOut={handlePressOut}
      style={[styles.button, isPressed ? styles.buttonPressed : null]}
    >
      <Text style={styles.buttonText}>Press Me</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    backgroundColor: 'blue',
    padding: 10,
    borderRadius: 5,
  },
  buttonPressed: {
    backgroundColor: 'red',
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
  },
});

export default MyButton;

修复方式二：过滤样式数组中的假值 #

通过filter(Boolean)移除数组中的布尔值、null等无效项：

style={[styles.button, isPressed && styles.buttonPressed].filter(Boolean)}

更简洁的替代方案：使用Pressable组件 #

React Native官方推荐使用Pressable替代传统的TouchableOpacity，它可以直接获取按压状态，无需手动维护isPressed状态：

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

const MyButton = () => {
  return (
    <Pressable
      style={({ pressed }) => [
        styles.button,
        pressed && styles.buttonPressed
      ]}
    >
      {({ pressed }) => (
        <Text style={styles.buttonText}>Press Me</Text>
      )}
    </Pressable>
  );
};

const styles = StyleSheet.create({
  button: {
    backgroundColor: 'blue',
    padding: 10,
    borderRadius: 5,
  },
  buttonPressed: {
    backgroundColor: 'red',
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
  },
});

export default MyButton;

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