js實現(xiàn)界面向原生界面發(fā)消息并跳轉(zhuǎn)功能
本文實例為大家分享了js界面向原生界面發(fā)消息并跳轉(zhuǎn)的具體代碼,供大家參考,具體內(nèi)容如下
步驟一
在idea中,打開rn項目下的./Android/app,這個過程需要一點兒時間,可能還需要下載gradle的依賴什么的。
步驟二
跟做原生app沒差,我們新建一個TestActivity,簡單起見,僅實現(xiàn)如下:
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使用這個名稱來調(diào)用原生模塊的其他函數(shù)
@Override
public String getName() {
return "ExampleInterface";
}
//必須寫@ReactMethod,將其注冊為能夠被React調(diào)用的函數(shù)
@ReactMethod
public void HandlerMessage(String aMessage){
Log.d("lt","====receive message from RN==="+aMessage);
//這部分實現(xiàn)簡單的跳轉(zhuǎn)
Intent intent = new Intent(mRApplicationContext,TestActivity.class);
intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
mRApplicationContext.startActivity(intent);
}
}
步驟四
實現(xiàn)一個包管理器,并將接收消息的類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界面,發(fā)送消息;
buttonPress:function(){
NativeModules.ExampleInterface.HandlerMessage('test');
}
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JS是按值傳遞還是按引用傳遞
- 如何將JS的變量值傳遞給ASP變量
- JavaScript傳遞變量: 值傳遞?引用傳遞?
- JSP與JS交互問題 值傳遞
- IOS程序開發(fā)之跳轉(zhuǎn)短信發(fā)送界面實現(xiàn)發(fā)送短信功能
- Android編程使用Fragment界面向下跳轉(zhuǎn)并一級級返回的實現(xiàn)方法
- php+js iframe實現(xiàn)上傳頭像界面無跳轉(zhuǎn)
- JS 退出系統(tǒng)并跳轉(zhuǎn)到登錄界面的實現(xiàn)代碼
- Android中應(yīng)用界面主題Theme使用方法和頁面定時跳轉(zhuǎn)應(yīng)用
- 詳解js界面跳轉(zhuǎn)與值傳遞
相關(guān)文章
html+css+js實現(xiàn)canvas跟隨鼠標的小圓特效源碼
這篇文章主要介紹了html+css+js實現(xiàn)canvas跟隨鼠標的小圓特效源碼,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-03-03
火狐和ie下獲取javascript 獲取event的方法(推薦)
下面小編就為大家?guī)硪黄鸷蚷e下獲取javascript 獲取event的方法(推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
Angular+Bootstrap+Spring Boot實現(xiàn)分頁功能實例代碼
這篇文章主要介紹了Angular+Bootstrap+Spring Boot實現(xiàn)分頁功能實例代碼,需要的朋友可以參考下2017-07-07

