js實(shí)現(xiàn)界面向原生界面發(fā)消息并跳轉(zhuǎn)功能
本文實(shí)例為大家分享了js界面向原生界面發(fā)消息并跳轉(zhuǎn)的具體代碼,供大家參考,具體內(nèi)容如下
步驟一
在idea中,打開(kāi)rn項(xiàng)目下的./Android/app,這個(gè)過(guò)程需要一點(diǎn)兒時(shí)間,可能還需要下載gradle的依賴什么的。
步驟二
跟做原生app沒(méi)差,我們新建一個(gè)TestActivity,簡(jiǎn)單起見(jiàn),僅實(shí)現(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(); } }); } }
步驟三
寫一個(gè)類ExampleInterface extends ReactContextBaseJavaModule,在該類中接收消息。
具體代碼:
public class ExampleInterface extends ReactContextBaseJavaModule { private ReactApplicationContext mRApplicationContext; public ExampleInterface(ReactApplicationContext reactContext) { super(reactContext); mRApplicationContext = reactContext; } //RN使用這個(gè)名稱來(lái)調(diào)用原生模塊的其他函數(shù) @Override public String getName() { return "ExampleInterface"; } //必須寫@ReactMethod,將其注冊(cè)為能夠被React調(diào)用的函數(shù) @ReactMethod public void HandlerMessage(String aMessage){ Log.d("lt","====receive message from RN==="+aMessage); //這部分實(shí)現(xiàn)簡(jiǎn)單的跳轉(zhuǎn) Intent intent = new Intent(mRApplicationContext,TestActivity.class); intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK); mRApplicationContext.startActivity(intent); } }
步驟四
實(shí)現(xiàn)一個(gè)包管理器,并將接收消息的類ExampleInterface,注冊(cè)進(jìn)去。
代碼如下:
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'); }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JS是按值傳遞還是按引用傳遞
- 如何將JS的變量值傳遞給ASP變量
- JavaScript傳遞變量: 值傳遞?引用傳遞?
- JSP與JS交互問(wèn)題 值傳遞
- IOS程序開(kāi)發(fā)之跳轉(zhuǎn)短信發(fā)送界面實(shí)現(xiàn)發(fā)送短信功能
- Android編程使用Fragment界面向下跳轉(zhuǎn)并一級(jí)級(jí)返回的實(shí)現(xiàn)方法
- php+js iframe實(shí)現(xiàn)上傳頭像界面無(wú)跳轉(zhuǎn)
- JS 退出系統(tǒng)并跳轉(zhuǎn)到登錄界面的實(shí)現(xiàn)代碼
- Android中應(yīng)用界面主題Theme使用方法和頁(yè)面定時(shí)跳轉(zhuǎn)應(yīng)用
- 詳解js界面跳轉(zhuǎn)與值傳遞
相關(guān)文章
Javascript控制input輸入時(shí)間格式的方法
這篇文章主要介紹了Javascript控制input輸入時(shí)間格式的方法,涉及鼠標(biāo)事件及正則表達(dá)式的靈活應(yīng)用,需要的朋友可以參考下2015-01-01JavaScript引用類型Date常見(jiàn)用法實(shí)例分析
這篇文章主要介紹了JavaScript引用類型Date常見(jiàn)用法,結(jié)合實(shí)例形式分析了引用類型Date基本創(chuàng)建、參數(shù)使用及相關(guān)注意事項(xiàng),需要的朋友可以參考下2018-08-08JS實(shí)現(xiàn)選項(xiàng)卡效果的代碼實(shí)例
這篇文章主要介紹了JS選項(xiàng)卡效果,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05html+css+js實(shí)現(xiàn)canvas跟隨鼠標(biāo)的小圓特效源碼
這篇文章主要介紹了html+css+js實(shí)現(xiàn)canvas跟隨鼠標(biāo)的小圓特效源碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-03火狐和ie下獲取javascript 獲取event的方法(推薦)
下面小編就為大家?guī)?lái)一篇火狐和ie下獲取javascript 獲取event的方法(推薦)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11Angular+Bootstrap+Spring Boot實(shí)現(xiàn)分頁(yè)功能實(shí)例代碼
這篇文章主要介紹了Angular+Bootstrap+Spring Boot實(shí)現(xiàn)分頁(yè)功能實(shí)例代碼,需要的朋友可以參考下2017-07-07JavaScript實(shí)現(xiàn)的多種鼠標(biāo)拖放效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的多種鼠標(biāo)拖放效果,涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)變換頁(yè)面元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11