本文實例為大家分享了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');
}
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。