Cordova应用在Android设备上点击按钮无法触发JS事件怎么办？

Prog.瑞雪提问于 2026-02-19 05:40:26 阅读 13

移动

我在React项目里用Cordova调用原生相机插件，但Android设备上点击按钮完全没反应。代码在浏览器测试没问题，真机日志也没报错，尝试过把事件绑定改成onClick和addEventListener都不行。

这是我的组件代码：


class CameraPage extends React.Component {
  takePhoto = () => {
    navigator.camera.getPicture(
      (uri) => console.log(uri),
      (err) => console.error(err),
      { quality: 50 }
    );
  };

  componentDidMount() {
    document.addEventListener('deviceready', this.takePhoto);
  }

  render() {
    return <button>拍照</button>; // Android点击无效
  }
}

用cordova-plugin-camera 4.1.0版本，配置了 CAMERA和PHOTOLIBRARY权限。模拟器和iOS真机都能触发，唯独Android 13的测试机没响应，求大神指点！

Cordova 跨端开发

我来解答赞 9 收藏

反馈

1 条解答

梓熙 Lv1

问题出在按钮没有正确绑定事件，Android上Cordova的WebView需要手动处理点击事件绑定。把按钮加上onClick绑定事件，同时确保deviceready事件触发后再操作。

这是修复后的代码：

class CameraPage extends React.Component {

  constructor(props) {

    super(props);

    this.state = { isDeviceReady: false };

  }



  takePhoto = () => {

    if (!this.state.isDeviceReady) return;

    navigator.camera.getPicture(

      (uri) => console.log(uri),

      (err) => console.error(err),

      { quality: 50 }

    );

  };



  componentDidMount() {

    document.addEventListener('deviceready', () => {

      this.setState({ isDeviceReady: true });

    }, false);

  }



  render() {

    return <button onClick={this.takePhoto}>拍照</button>;

  }

}

另外确认一下config.xml里是否添加了<allow-navigation href="*" />，有时候权限配置也会导致这个问题。

2026-02-19 06:05