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

前端之家收集整理的这篇文章主要介绍了js实现界面向原生界面发消息并跳转功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

步骤一

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

步骤二

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

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

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

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

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

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

步骤五

在MainApplication中添加包管理类AnExampleReactPackage;

getPackages() { return Arrays.asList( new MainReactPackage(),new AnExampleReactPackage() ); }

步骤六

在js界面,发送消息;

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

猜你在找的JavaScript相关文章