js實現界面向原生界面發消息並跳轉功能

這篇文章主要爲你們詳細介紹了js實現界面向原生界面發消息並跳轉功能,具備必定的參考價值，感興趣的小夥伴們能夠參考一下

本文實例爲你們分享了js界面向原生界面發消息並跳轉的具體代碼，供你們參考，具體內容以下

步驟一 
在idea中，打開rn項目下的./Android/app,這個過程須要一點兒時間，可能還須要下載gradle的依賴什麼的。

步驟二 
跟作原生app沒差，咱們新建一個TestActivity，簡單起見，僅實現以下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

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,在該類中接收消息。 
具體代碼：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

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，註冊進去。 
代碼以下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

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；

?

1 2 3 4 5 6 7

@Override  protected List<ReactPackage> getPackages() {   return Arrays.<ReactPackage>asList(     new MainReactPackage(),     new AnExampleReactPackage()   );  }

步驟六 
在js界面，發送消息；

?

1 2 3

buttonPress:function(){   NativeModules.ExampleInterface.HandlerMessage('test');   }

以上就是本文的所有內容，但願對你們的學習有所幫助，也但願你們多多支持腳本之家。