DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> js實現界面向原生界面發消息並跳轉功能
js實現界面向原生界面發消息並跳轉功能
編輯:關於JavaScript     

本文實例為大家分享了js界面向原生界面發消息並跳轉的具體代碼,供大家參考,具體內容如下

步驟一
在idea中,打開rn項目下的./Android/app,這個過程需要一點兒時間,可能還需要下載gradle的依賴什麼的。

步驟二
跟做原生app沒差,我們新建一個TestActivity,簡單起見,僅實現如下:

public class TestActivity extends AppCompatActivity {

  private Button mBtGoBack;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_test);
    mBtGoBack = (Button) findViewById(R.id.bt_go_back);
    mBtGoBack.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
        finish();
      }
    });

  }
}

步驟三
寫一個類ExampleInterface extends ReactContextBaseJavaModule,在該類中接收消息。
具體代碼:

public class ExampleInterface extends ReactContextBaseJavaModule {

  private ReactApplicationContext mRApplicationContext;

  public ExampleInterface(ReactApplicationContext reactContext) {
    super(reactContext);
    mRApplicationContext = reactContext;
  }

  //RN使用這個名稱來調用原生模塊的其他函數
  @Override
  public String getName() {
    return "ExampleInterface";
  }
  //必須寫@ReactMethod,將其注冊為能夠被React調用的函數
  @ReactMethod
  public void HandlerMessage(String aMessage){
    Log.d("lt","====receive message from RN==="+aMessage);
     //這部分實現簡單的跳轉
    Intent intent = new Intent(mRApplicationContext,TestActivity.class);
    intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
    mRApplicationContext.startActivity(intent); 
  }

}

步驟四

實現一個包管理器,並將接收消息的類ExampleInterface,注冊進去。
代碼如下:

public class AnExampleReactPackage implements ReactPackage {

  @Override
  public List<NativeModule> createNativeModules(ReactApplicationContext reactApplicationContext) {
    List<NativeModule> modules = new ArrayList<>();
    modules.add(new ExampleInterface(reactApplicationContext));
    return modules;
  }

  @Override
  public List<Class<? extends JavaScriptModule>> createJSModules() {
    return Collections.emptyList();
  }

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

步驟五
在MainApplication中添加包管理類AnExampleReactPackage;

 @Override
  protected List<ReactPackage> getPackages() {
   return Arrays.<ReactPackage>asList(
     new MainReactPackage(),
     new AnExampleReactPackage()
   );
  }

步驟六
在js界面,發送消息;

buttonPress:function(){
  NativeModules.ExampleInterface.HandlerMessage('test');
  }

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved