React Native中setState点击两次才生效 按钮点击修改透明度异常问题

问题原因分析 #

• 1. 组件自带效果冲突：你用的TouchableOpacity组件默认自带点击时修改透明度的交互效果，会和你自定义绑定到style的opacity状态产生冲突，第一次点击时自带的临时透明度修改会覆盖状态更新的表现，导致看起来第一次点击没生效。
• 2. 状态逻辑不符合双按钮选中需求：你目前只定义了单个opac状态，如果要实现两个按钮互斥选中的效果，单个状态没法区分当前选中的是哪个按钮，会导致两个按钮透明度同步变化，逻辑完全走不通。
• 3. 透明度属性概念混淆：你提到「透明度更低、颜色更深的为选中项」，这里要注意opacity属性的取值逻辑是：数值越小透明度越高（越透、颜色越浅），数值越大透明度越低（越不透明、颜色越深），如果你的状态赋值逻辑和这个规则相反，也会出现表现不符合预期的问题。

修复方案 #

1. 替换基础组件：把TouchableOpacity换成无默认交互效果的Pressable组件，避免自带透明度效果和自定义状态冲突。
2. 调整状态逻辑：用状态存储当前选中的按钮标识，而不是单一的透明度数值，实现双按钮互斥选中：

import { Pressable } from 'react-native';

export default function lastName({ navigation }) {
  // 存储当前选中的按钮id，初始为空
  const [selectedBtn, setSelectedBtn] = useState(null);

  return (
    <View style={styles.container}>
      <View
        style={{
          flex: 0.5,
          justifyContent: "flex-end",
        }}
      >
        <Text style={styles.textStyle}>
         Select a button
        </Text>
      </View>
      <View
        style={{
          flex: 1,
          justifyContent: "flex-start",
        }}
      >
        {/* 按钮1：选中时opacity为1（透明度低、颜色深），未选中为0.3 */}
        <Pressable
          style={{
            marginTop: 70,
            alignItems: "center",
            justifyContent: "center",
            width: 180,
            height: 40,
            backgroundColor: "#004953",
            opacity: selectedBtn === 'btn1' ? 1 : 0.3,
            borderRadius: 100,
          }}
          onPress={() => {
            setSelectedBtn('btn1');
          }}
        >
          <Text
            style={{
              color: "white",
              textAlign: "center",
              fontSize: 18,
            }}
          >
            Button 1
          </Text>
        </Pressable>

        {/* 按钮2逻辑和按钮1对应 */}
        <Pressable
          style={{
            marginTop: 20,
            alignItems: "center",
            justifyContent: "center",
            width: 180,
            height: 40,
            backgroundColor: "#004953",
            opacity: selectedBtn === 'btn2' ? 1 : 0.3,
            borderRadius: 100,
          }}
          onPress={() => {
            setSelectedBtn('btn2');
          }}
        >
          <Text
            style={{
              color: "white",
              textAlign: "center",
              fontSize: 18,
            }}
          >
            Button 2
          </Text>
        </Pressable>
      </View>
    </View>
  )
}

3. 如果要保留TouchableOpacity组件，也可以通过设置activeOpacity={1}属性关闭它的默认透明度变化效果，避免冲突：

<TouchableOpacity
  activeOpacity={1}
  // 其余属性不变
/>

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