React Native Reanimated中JSX内if-else语句失效问题排查

我尝试用React Native Reanimated实现图片点击时的缩放动画，但JSX里的if-else逻辑不符合预期——只有第一次点击有效。当state Toggled设为true后，再次点击本该恢复尺寸并还原动画，但实际没效果。

初始代码如下：

export default () => {
  const newNumber = useSharedValue(100);
  const [Toggled, setToggled] = useState(false);

  const style = useAnimatedStyle(() => {
    return {
      width: withSpring(newNumber.value),
      height: withSpring(newNumber.value, { damping: 10, stiffness: 90 }),
    };
  });

  onPress={() => {
    {Toggled ? newNumber.value = 100 : newNumber.value = 350; setToggled(true)}
  }}

问题在于，我尝试在Toggled设为false时添加newNumber.value = 100，写了下面的代码却报错：

{Toggled ? newNumber.value = 100; setToggled(false) : newNumber.value = 350; setToggled(true)}

为什么第一种写法能运行，第二种不行？另外，下面的写法能正常工作，但有没有其他实现方式？

const isToggled = Toggled;
 
if (isToggled) {
  // alert('Is NOT Toggled');
  newNumber.value = 100;
  setToggled(false)
} else {
// alert('Is Toggled');
  newNumber.value = 350;
  setToggled(true)
}

问题原因 #

这是因为三元运算符的语法规则导致的：三元运算符的结构是条件 ? 表达式1 : 表达式2，其中表达式1和表达式2必须是单个表达式，不能直接写入多条语句（比如同时赋值+调用setState）。

而第一种写法能“运行”其实是个巧合——JavaScript会把setToggled(true)当成三元运算符之外的独立语句，不管Toggled当前状态是什么，每次点击都会执行setToggled(true)。这也是为什么第一次点击后无法触发反向动画的核心原因：state被强制一直设为true，再也走不到反向分支。

替代实现方式 #

方式1：用立即执行函数包裹多语句（IIFE） #

把三元运算符的分支用立即执行函数包裹，将多条语句转化为单个表达式：

onPress={() => {
  Toggled 
    ? (() => { newNumber.value = 100; setToggled(false); })() 
    : (() => { newNumber.value = 350; setToggled(true); })();
}}

方式2：简化逻辑（推荐） #

直接取反当前state，同时根据新状态计算目标尺寸，写法更简洁易读：

onPress={() => {
  const nextToggled = !Toggled;
  newNumber.value = nextToggled ? 350 : 100;
  setToggled(nextToggled);
}}

方式3：利用逻辑运算符短路特性（不推荐） #

通过逻辑与（&&）的短路特性实现分支逻辑，虽然可行但可读性较差：

onPress={() => {
  Toggled && (newNumber.value = 100) && setToggled(false);
  !Toggled && (newNumber.value = 350) && setToggled(true);
}}

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