React Native移动端点击事件处理：Web代码迁移至Pressable/TouchableOpacity遇阻

在React Native里，Pressable和TouchableOpacity没有Web按钮的value属性，没法通过事件对象取到对应值，换下面的方法就能解决：

方法1：直接在 onPress 里传参 #

先把回调函数改成直接接收answer参数，不用再从事件里扒值：

const checkAnswer = (answer: string) => {
  const correct = questions[number].correct_answer === answer;
  if (correct) setScore(prev => prev + 1);
};

然后渲染Pressable的时候，直接把答案传进去：

<Pressable onPress={() => checkAnswer(answer)}>
  <Text>{answer}</Text>
</Pressable>

方法2：用 useCallback 优化性能 #

如果组件会频繁重渲染，用useCallback包裹回调，减少不必要的函数创建：

import { useCallback } from 'react';

const checkAnswer = useCallback((answer: string) => {
  const correct = questions[number].correct_answer === answer;
  if (correct) setScore(prev => prev + 1);
}, [number, questions, setScore]);

渲染代码和方法1一致即可。

补充说明 #

React Native的触摸事件对象（GestureResponderEvent）和Web的鼠标事件逻辑不同，没有currentTarget.value这类属性，因此必须通过显式传参的方式把需要的数据传给回调函数，这是React Native里处理这类交互场景的常规做法。

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