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-11Angular+Bootstrap+Spring Boot實現(xiàn)分頁功能實例代碼
這篇文章主要介紹了Angular+Bootstrap+Spring Boot實現(xiàn)分頁功能實例代碼,需要的朋友可以參考下2017-07-07