Expo v42.0.0中TouchableOpacity实现的RoundedButton的onPress事件无响应

问题根因 #

你自定义的RoundedButton组件没有将外部传入的onPress事件透传给内部的TouchableOpacity组件，导致点击事件无法向上回调。另外你定义的size、style、textStyle参数也没有实际用到，组件样式不会生效。

修复方案 #

将RoundedButton.js代码替换为以下内容即可：

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

export const RoundedButton = ({
  style = {},
  textStyle = {},
  size = 125,
  ...props
}) => {
  return (
      {/* 透传onPress、添加对应尺寸样式 */}
      <TouchableOpacity 
        onPress={props.onPress}
        style={[
          styles.button,
          { width: size, height: size, borderRadius: size/2 },
          style
        ]}
      >
        <Text style={[styles.text, textStyle]}>{props.title}</Text>
      </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#2196F3', // 可自定义按钮颜色
    alignItems: 'center',
    justifyContent: 'center'
  },
  text: {
    color: 'white',
    fontSize: 24,
    fontWeight: 'bold'
  }
})

补充注意点 #

• 如果还是出现点击无响应的情况，检查按钮是否被其他绝对定位的元素遮挡，或者父组件是否设置了pointerEvents属性禁用了点击
• 可以给TextInput添加value={tmpItem}属性，保证状态和输入框显示内容同步

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