JavaScriptメソッドをJava React Nativeから呼び出す

Question

React Nativeを初めて使用しましたが、JavaからReact Native JavaScriptメソッドを呼び出すことが可能かどうかを知りたいですか？私は、押されたときにメソッドをトリガーするために使用したい物理的なボタンを備えたニッチデバイスを持っています。

私は次のプラグインを見ましたhttps://github.com/artemyarulin/react-native-evalしかし、Androidの実装は古くなっているようです。

私は周りにはありましたが、React NativeからJavaメソッドを呼び出すリファレンスを見つけることができます。

事前に感謝します。

EDIT

私は以下の@ideによって提案された方法を使用してソリューションを実装しようとしています。ここに私の試みはこれまでのところです：私は私のMainActivityで

：

private String latestBarcode = ""; 

... 

public String getLastestBarcode() { 
    return this.latestBarcode; 
} 

public void setLatestBarcode(String barcode) { 
    this.latestBarcode = barcode; 
} 

@Override 
public void onBarcodeEvent(final BarcodeReadEvent event) { 
    runOnUiThread(new Runnable(){ 
    @Override 
    public void run() { 
     String barcodeData = event.getBarcodeData(); 
     String tstp = event.getTimestamp(); 
     setLatestBarcode(barcodeData); 
     Log.d("MainActivity", " TEST - barcodeData "+ barcodeData + " tstp : "+ tstp); 
    } 
    }); 
} 
... 

このコードは、ユーザーが物理的なハードウェアボタンを押すと、デバイスからのバーコード値を取得します。私のカスタムで

が

@ReactMethod 
public void latestBarcode(Callback callback) { 
    final Activity activity = getCurrentActivity(); 

    if(activity != null && activity instanceof MainActivity){ 
    callback.invoke(((MainActivity) activity).getLastestBarcode()); 
    } 
    else { 
    callback.invoke(""); 
    } 
} 

ネイティブモジュールを反応させるのこのメソッドは値をとり、ネイティブを反応させるために、それを公開しています。これは私が値を読み取ることができます動作しますが、私は、ユーザーがそれはすべてその全体に今立っているように私は、ネイティブモジュールを反応させるのであるので、ここでボタンを押したときにメソッドをトリガーする必要があります。

import android.app.Activity; 
import android.util.Log; 

import com.facebook.react.bridge.NativeModule; 
import com.facebook.react.bridge.Callback; 
import com.facebook.react.bridge.ReactContextBaseJavaModule; 
import com.facebook.react.bridge.ReactApplicationContext; 
import com.facebook.react.bridge.ReactContext; 
import com.facebook.react.bridge.ReactMethod; 
import com.facebook.react.modules.core.DeviceEventManagerModule; 

import com.facebook.react.bridge.WritableMap; 
import com.facebook.react.bridge.Arguments; 

import javax.annotation.Nullable; 

// Import MainActivity 
import com.myapp.MainActivity; 

public class HoneywellCT50Module extends ReactContextBaseJavaModule { 
    private ReactContext reactContext; 

    public HoneywellCT50Module(ReactApplicationContext reactContext) { 
    super(reactContext); 
    this.reactContext = reactContext; 
    } 


    @ReactMethod 
    public void latestBarcode(Callback callback) { 
    final Activity activity = getCurrentActivity(); 

    if(activity != null && activity instanceof MainActivity){ 
     WritableMap params = Arguments.createMap(); // <--- Added WritableMap 
     sendEvent("BarcodeRecieved", params); // <--- Added sendEvent 

     callback.invoke(((MainActivity) activity).getLastestBarcode()); 
    } 
    else { 
     callback.invoke(""); 
    } 
    } 

    // Added sendEvent 
    private void sendEvent(
    String eventName, 
    @Nullable WritableMap params 
) { 
    this.reactContext 
     .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class) 
     .emit(eventName, params); 
    } 


    @Override 
    public String getName() { 
    return "HoneywellCT50"; 
    } 
} 

では、ネイティブリアクト：

// I import DeviceEventEmitter 
import { DeviceEventEmitter } from 'react-native' 

componentDidMount() { 
    // Listen for Honeywell Scans 
    DeviceEventEmitter.addListener('BarcodeRecieved', this.getBarcodeValue) 
} 

// I want to trigger this method 
getBarcodeValue() { 
    console.log('Event Received') 
    // This gets the barcode value, works ok 
    HoneywellCT50.latestBarcode((value) => { 
    this.setState({ barcode: value }) 
    }) 
} 

上記のコードでは、Java /ビルドエラーなしでプロジェクトを構築できますが、JSエラーは表示されませんが、イベントをトリガーできません。誰もがここから正しい方向に向けるのを助けることができますか？

Answer 1

JavaScriptから送信されたイベントをJavaから送信します。独自のネイティブモジュールを作成し、JavaScriptからイベントを購読し、ネイティブコードでイベントを発行します。このガイドをご覧ください：http://facebook.github.io/react-native/docs/native-modules-android.html#sending-events-to-javascript

Answer 2

わかりましたので、いくつかのコードが動作しています。私はこれが最善の解決策であるかどうかわからないんだけど、今、私は私の理解の限界だと次のように任意のフィードバックを歓迎する：

MainActivity.java

@Override 
public void onBarcodeEvent(final BarcodeReadEvent event) { 
    runOnUiThread(new Runnable(){ 
    @Override 
    public void run() { 
     String barcodeData = event.getBarcodeData(); 
     String tstp = event.getTimestamp(); 
     setLatestBarcode(barcodeData); 
     Log.d("MainActivity", " TEST - barcodeData "+ barcodeData + " tstp : "+ tstp); 
    } 
    }); 

    WritableMap params = Arguments.createMap(); // <--- added 

    getReactInstanceManager().getCurrentReactContext() // <--- added 
    .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class) // <--- added 
    .emit("BarcodeReceived", params); // <--- added 
} 

これは私がトリガすることができます動作します私のJSに次のように使用してメソッドを反応させる：

componentWillUnmount() { 
    this._barcodeListener.remove() 
} 

componentWillMount() { 
    // Listen for Honeywell Scans 
    this.getBarcodeValue = DeviceEventEmitter.addListener('BarcodeReceived', this.getBarcodeValue) 
} 

... 

getBarcodeValue() { 
    console.log('Event Received') 

    HoneywellCT50.latestBarcode((value) => { 
    this.setState({ barcode: value },() => { 
     console.log(this.state.barcode) 
    }) 
    }) 
} 

経験を持つ誰もが、これは私が上記の私のEDITに投稿されたコードが機能しなかった理由を知りたいと思って読み取った場合。それは@ReactMethodでイベントを発信しようとしたためですか？