javascript - 与 Native Mobile(iOS 或 Android)进行 React 组件通信

我知道这可能不是最好的设计方法。我被迫遵守现有的架构。

给定以下一组 React 组件。如何完成以下 senerio。

ReactComponentInstance <-Communication-> Native iOS or Android

概述:

1. 负责管理图像的通用 React 组件。

2. 单击此图像后，React 组件会调用 Native Application 以调用带有数据的 View 。 (我已经有办法管理这部分了)。

3. native 代码对数据进行一些处理。(此逻辑无关紧要。

4. 我遇到的挑战。如何回调调用 native 代码的 React 组件的同一实例。

Webapp 和 Native 应用程序之间的通信是通过 javascript 桥接器处理的。

var ImageClass = React.createClass({
  getInitialState: function (){
    return {
      imgURL:"http://i0.wp.com/www.compusurf.es/wordpress/wp-content/uploads/2014/04/smiley.jpeg?fit=1200%2C1200"
    }
  },
  didCompleteMobileProcessing: function (data){
    //This function should only be invoked on the specific instance which invoked the native code. 
    //Invoked when the Mobile native code is done processing image.
    //Populate image with new data form native app. 
    //this.setState(data);  
  },
  handleClick: function (e){
    e.preventDefault();
    console.log("Image Clicked");
    //Load mobile Native View. Sending it the image and allow it to process data
    //LoadNativeView(this.state.imgURL);
  },
  render: function (){
    return(
      <span className="ImageContainer">
        <img onClick={this.handleClick} src={this.state.imgURL} alt="ImageBox" align="center"/>
      </span> 
    ); 
  }
});


var App = React.createClass({
  render: function() {
    return(
      <div className="container">
        <ImageClass/> //Instance 1
        <ImageClass/> //Instance 2
        <ImageClass/> //Instance 3
        <ImageClass/> //Instance 4
        <ImageClass/> //Instance 5
      </div>
    );      
  }
});

---

Best Answer-推荐答案

您可以使用命令在 native 和 react native 之间进行通信。

在 ViewGroupManager 中使用这两种方法

getCommandsMap()
receiveCommand()

这里有详细的explaination

关于javascript - 与 Native Mobile(iOS 或 Android)进行 React 组件通信，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28698714/