Home > Web Front-end > JS Tutorial > body text

js implements the interface to send messages to the native interface and jump to the function

高洛峰
Release: 2016-12-05 16:10:38
Original
1081 people have browsed it

The example in this article shares the specific code for sending messages and jumping from the js interface to the native interface for your reference. The specific content is as follows

Step 1
In idea, open ./Android/app under the rn project, this process It will take a while, and you may also need to download gradle dependencies or something.

Step 2
It’s the same as making a native app. We create a new TestActivity. For simplicity, we only implement it as follows:

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

Step 3
Write a class ExampleInterface extends ReactContextBaseJavaModule and receive messages in this class.
Specific code:

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);
  }
 
}
Copy after login

Step 4

Implement a package manager and register the class ExampleInterface that receives the message.
The code is as follows:

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

Step 5
Add the package management class AnExampleReactPackage in MainApplication;

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

Step 6
In the js interface, send a message;

buttonPress:function(){
  NativeModules.ExampleInterface.HandlerMessage(&#39;test&#39;);
  }
Copy after login


Related labels:
js
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!