Home  >  Article  >  Web Front-end  >  js implements the interface to send messages to the native interface and jump to the function

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

高洛峰
高洛峰Original
2016-12-05 16:10:381120browse

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

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

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

Step 5
Add the package management class AnExampleReactPackage in MainApplication;

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

Step 6
In the js interface, send a message;

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


Statement:
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