從反應本機應用程序集成到現有的Android應用程序中獲得結果

Question

我發現了很多關於如何將反應本機集成到現有Android應用程序中的文章。但是他們都沒有解釋如何從反應原生代碼中得到結果以便直接在Java android源代碼中使用它。

說明：我有一個反應本機應用程序，它正在執行特定作業並在彈出窗口中顯示結果。 我想整合這個應用程序（做必要的修改），以便能夠將此特定結果導入到我的Android Java源代碼中，而不是將其顯示到反應本機彈出窗口中。

我搜索了所有的互聯網，但沒有發現任何關於此。

Answer 1

爲了得到一個結果，從你開始將該活動，你的模塊需要訪問你的活動的參考。
這裏有兩種解決方案：
- 聲明模塊作爲一個內部類活動的
- 通過在模塊

中的構造您的活動的參考，但，請記住，你的模塊需要使用一個ReactPackage和ReactPackage是一個接口，所以如果你想讓你的ReactActivity實現接口（而不是創建一個新類）。

下面是使用inner class和一個完整的工作示例活動實施ReactPackage：

public class MyReactActivity extends AppCompatActivity 
    implements DefaultHardwareBackBtnHandler, ReactPackage 
{ 
    private ReactRootView mReactRootView; 
    private ReactInstanceManager mReactInstanceManager; 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 

     mReactRootView = new ReactRootView(this); 
     mReactInstanceManager = ReactInstanceManager.builder() 
       .setApplication(getApplication()) 
       .setBundleAssetName("index.android.bundle") 
       .setJSMainModuleName("index.android") 
       .addPackage(new MainReactPackage()) 
       // This activity is also a "ReactPackage" 
       .addPackage(this) 
       .setUseDeveloperSupport(BuildConfig.DEBUG) 
       .setInitialLifecycleState(LifecycleState.RESUMED) 
       .build(); 

     mReactRootView.startReactApplication(mReactInstanceManager, "MyReactComponent", null); 

     setContentView(mReactRootView); 
    } 

    @Override 
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) { 
     List<NativeModule> modules = new ArrayList<>(); 
     // The module is added to the ReactPackage 
     modules.add(new TestModule(reactContext)); 
     return modules; 
    } 

    @Override 
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) { 
     return Collections.emptyList(); 
    } 

    // Module definition as an inner class 
    public class TestModule extends ReactContextBaseJavaModule { 
     public TestModule(ReactApplicationContext reactContext) { 
      super(reactContext); 
     } 

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

     // The function you'll call from React Native 
     @ReactMethod 
     public void closewithresult(float datafromreact) { 
      // Set a result 
      Bundle bundle = new Bundle(); 
      bundle.putFloat("result", datafromreact); 
      setResult(Activity.RESULT_OK, (new Intent()).putExtras(bundle)); 

      // Close the activity 
      finish(); 
     } 
    } 

    /* 
    * Other overrided functions 
    * (not relevant for this question) 
    */ 
    @Override 
    public void invokeDefaultOnBackPressed() { 
     super.onBackPressed(); 
    } 

    @Override 
    protected void onPause() { 
     super.onPause(); 

     if (mReactInstanceManager != null) { 
      mReactInstanceManager.onHostPause(this); 
     } 
    } 

    @Override 
    protected void onResume() { 
     super.onResume(); 

     if (mReactInstanceManager != null) { 
      mReactInstanceManager.onHostResume(this, this); 
     } 
    } 

    @Override 
    protected void onDestroy() { 
     super.onDestroy(); 

     if (mReactInstanceManager != null) { 
      mReactInstanceManager.onHostDestroy(this); 
     } 
    } 

    @Override 
    public void onBackPressed() { 
     if (mReactInstanceManager != null) { 
      mReactInstanceManager.onBackPressed(); 
     } else { 
      super.onBackPressed(); 
     } 
    } 

    @Override 
    public boolean onKeyUp(int keyCode, KeyEvent event) { 
     if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) { 
      mReactInstanceManager.showDevOptionsDialog(); 
      return true; 
     } 
     return super.onKeyUp(keyCode, event); 
    } 

} 

然後，你就可以開始你的ReactActivity這樣的：

Intent intent = new Intent(getApplicationContext(), MyReactActivity.class); 
startActivityForResult(intent, 123); 

得到這樣的結果：

@Override 
protected void onActivityResult(int requestCode, int resultCode, Intent data) { 
    if (requestCode == 123 && resultCode == Activity.RESULT_OK) { 
     float result = data.getExtras().getFloat("result"); 
     // Do whatever you want with "result" 
    } 
} 

And jus t在反應中使用它：

import { NativeModules } from 'react-native'; 
// [...] 
// Call the function 
NativeModules.TestModule.closewithresult(654.532); 

Answer 2

也許我不明白你想做什麼..但你不能只是建立一個本地模塊，並讓你的React Native應用程序在完成將數據傳遞到本地代碼時調用該函數？

比方說，您的應用的React Native部分將用戶的姓名和姓氏作爲輸入，並且他們會提交。

您可以將您的RN JavaScript編碼爲正常：將2個TextInput字段的值映射到您的狀態，並使用帶有onPress處理程序的Button。在onPress處理，你會打電話給你的本機模塊並通過參數

import { 
    NativeModules 
} from 'react-native'; 

const NativeNameSubmission = NativeModules.NameSubmission; 

... 

    <Button 
     onPress={() => NativeNameSubmission.submitName(this.state.firstName, this.state.lastName)} 
     title="Submit"/> 

你的本機模塊會是這個樣子：

public class RCTNameSubmission extends ReactContextBaseJavaModule { 

    public RCTNameSubmission(ReactApplicationContext reactContext) { 
     super(reactContext); 
    } 

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

    @ReactMethod 
    public void submitName(String firstName, String lastName) { 
     // save the name data for later use 
     ... 
     // Exit React App 
     getCurrentActivity().finish(); 
    } 
}