React Native中TouchableOpacity组件点击无响应问题求助

核心原因 #

你的RoundedButton组件未将父组件传入的onPress回调绑定到内部的TouchableOpacity组件上，导致点击操作无法触发预期的函数。

修复代码 #

修改RoundedButton组件，将onPress回调绑定到TouchableOpacity：

function RoundedButton({style = {}, textStyle = {}, size = 125, ...props}) {
  return (
    <TouchableOpacity 
      style={[styles(size).radios, style]}
      onPress={props.onPress} // 绑定点击回调
    >
      <Text style={[styles(size).text, textStyle]}>
        {props.title}
      </Text>
    </TouchableOpacity>
  );
}

或者更简洁的方式，直接展开所有剩余props到TouchableOpacity上（自动包含onPress）：

function RoundedButton({style = {}, textStyle = {}, size = 125, ...props}) {
  return (
    <TouchableOpacity 
      style={[styles(size).radios, style]}
      {...props} // 展开所有剩余props，包括onPress
    >
      <Text style={[styles(size).text, textStyle]}>
        {props.title}
      </Text>
    </TouchableOpacity>
  );
}

额外优化 #

你当前在Focus组件中，TextInput的onSubmitEditing仅用于更新tempItem，如果想保留回车提交的功能，可以直接在这里调用addSubject，无需中间状态：

<TextInput
  style={styles.textInput}
  onSubmitEditing={(event) => {
    addSubject(event.nativeEvent.text);
  }}
/>

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