js实现界面向原生界面发消息并跳转功能
js实现界面向原生界面发消息并跳转功能
码农般的学良 发表于1年前
js实现界面向原生界面发消息并跳转功能
  • 发表于 1年前
  • 阅读 6
  • 收藏 0
  • 点赞 0
  • 评论 0

这篇文章主要为大家详细介绍了js实现界面向原生界面发消息并跳转功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js界面向原生界面发消息并跳转的具体代码,供大家参考,具体内容如下

步骤一 
在idea中,打开rn项目下的./Android/app,这个过程需要一点儿时间,可能还需要下载gradle的依赖什么的。

步骤二 
跟做原生app没差,我们新建一个TestActivity,简单起见,仅实现如下:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

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,在该类中接收消息。 
具体代码:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

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,注册进去。 
代码如下:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

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;

?

1

2

3

4

5

6

7

@Override

 protected List<ReactPackage> getPackages() {

  return Arrays.<ReactPackage>asList(

    new MainReactPackage(),

    new AnExampleReactPackage()

  );

 }

步骤六 
在js界面,发送消息;

?

1

2

3

buttonPress:function(){

  NativeModules.ExampleInterface.HandlerMessage('test');

  }

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

共有 人打赏支持
粉丝 2
博文 20
码字总数 23265
×
码农般的学良
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: