首页 > 编程 > JavaScript > 正文

js实现界面向原生界面发消息并跳转功能

2019-11-19 18:52:24
字体:
来源:转载
供稿:网友

本文实例为大家分享了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');  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表