javascript - 与 Native Mobile(iOS 或 Android)进行 React 组件通信
<p><p>我知道这可能不是最好的设计方法。我被迫遵守现有的架构。 </p>
<p>给定以下一组 React 组件。如何完成以下 senerio。</p>
<p>ReactComponentInstance <-Communication-> Native iOS or Android </p>
<p>概述:</p>
<ol>
<li><p>负责管理图像的通用 React 组件。</p></li>
<li><p>单击此图像后，React 组件会调用 Native Application 以调用带有数据的 View 。 (我已经有办法管理这部分了)。</p></li>
<li><p> native 代码对数据进行一些处理。(此逻辑无关紧要。</p></li>
<li><p>我遇到的挑战。如何回调调用 native 代码的 React 组件的同一实例。 </p></li>
</ol>
<p>Webapp 和 Native 应用程序之间的通信是通过 javascript 桥接器处理的。 </p>
<pre><code>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>
);
}
});
</code></pre></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>您可以使用命令在 native 和 react native 之间进行通信。</p>
<p>在 ViewGroupManager 中使用这两种方法</p>
<pre><code>getCommandsMap()
receiveCommand()
</code></pre>
<p>这里有详细的<a href="https://medium.com/@john1jan/communicating-to-and-from-native-ui-components-in-react-native-android-b8abcfb2f9c8#.8tnjasy3g" rel="noreferrer noopener nofollow">explaination</a> </p></p>
<p style="font-size: 20px;">关于javascript - 与 Native Mobile(iOS 或 Android)进行 React 组件通信，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/28698714/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/28698714/
</a>
</p>
页:
[1]