Nhận kết quả từ ứng dụng gốc phản ứng được tích hợp vào ứng dụng Android hiện có

Question

Tôi đã tìm thấy rất nhiều bài viết nói về cách tích hợp phản ứng gốc vào ứng dụng Android hiện có. Nhưng không ai trong số họ giải thích làm thế nào để có được một kết quả trở lại từ mã phản ứng bản địa để sử dụng nó trực tiếp trong mã nguồn Android Java.

Giải thích: Tôi có ứng dụng gốc phản ứng đang thực hiện một công việc cụ thể và hiển thị kết quả trong cửa sổ bật lên. Tôi muốn tích hợp ứng dụng này (thực hiện các sửa đổi cần thiết) để có thể nhận được kết quả cụ thể này vào mã nguồn Java Android của tôi thay vì hiển thị nó thành cửa sổ bật lên gốc tự do.

Tôi đã tìm kiếm tất cả trên internet nhưng không tìm thấy gì về điều này.

Answer 1

Để có được một kết quả trở lại từ hoạt động bạn bắt đầu , mô-đun của bạn cần có quyền truy cập vào tham chiếu về hoạt động của bạn.
Dưới đây là hai giải pháp:
- Khai báo các module như một lớp bên trong của hoạt động
- Vượt qua một tham chiếu hoạt động của bạn trong các nhà xây dựng của các mô-đun

Nhưng, hãy nhớ rằng mô-đun của bạn cần phải được sử dụng trong một ReactPackage và ReactPackage là một giao diện, vì vậy nếu bạn muốn, bạn có thể có ReactActivity của mình triển khai giao diện (thay vì tạo một lớp mới).

Dưới đây là một ví dụ làm việc đầy đủ sử dụng một inner class và một hoạt động thực hiện 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); 
    } 

} 

Sau đó, bạn có thể bắt đầu của bạn ReactActivity như thế này:

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

Lấy kết quả như thế này:

@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" 
    } 
} 

Và jus t sử dụng nó trong React:

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

Answer 2

Có lẽ tôi không hiểu bạn muốn làm gì .. nhưng bạn không thể chỉ xây dựng một mô-đun gốc và có ứng dụng React Native gọi hàm đó khi nó được thực hiện để chuyển dữ liệu đến mã gốc của bạn ?

Giả sử bạn có phần React Native của ứng dụng lấy tên và họ của người dùng làm đầu vào và họ nhấn gửi.

Bạn sẽ mã RN javascript của mình như bình thường: có 2 trường TextInput với giá trị được ánh xạ tới trạng thái của bạn và Nút có trình xử lý onPress. Trong xử lý onPress, bạn sẽ gọi Mô-đun Native của bạn và vượt qua các thông số

import { 
    NativeModules 
} from 'react-native'; 

const NativeNameSubmission = NativeModules.NameSubmission; 

... 

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

Mô-đun Native của bạn sẽ giống như thế này:

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(); 
    } 
}