美文网首页视觉码农react-native经验之谈
react-native调用原生方法!(调用原生activity

react-native调用原生方法!(调用原生activity

作者: Swimly | 来源:发表于2017-09-12 10:04 被阅读46次

    本章节是继上节的基础《react-native调用android原生方法!(Toast初试)》,如果有什么不了解的,可以看下上节的基础!

    1、创建一个activity MailActivity

    创建完成后,打开布局文件,位置在res\layout\activity_mail.xml,也可以直接点击MailActivity下面的布局文件链接。

    image.png

    将布局文件改成如下所示:

    ![Video_2017-09-12_101507.gif](https://img.haomeiwen.com/i1967155/8ce6d20ef7419f27.gif?imageMogr2/auto-orient/strip)
    
    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:android="http://schemas.android.com/apk/res/android">
    
        <Button
            android:text="原生按钮_点击退出"
            android:onClick="onBack"
            android:layout_centerInParent="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    
    </RelativeLayout>
    

    在activity中添加了一个按钮,并且添加了点击事件onBack,需要再次回到activity中添加这个onBack方法。
    MailActivity.java最终代码如下:

    package com.rncomponent;
    
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.view.View;
    
    public class MailActivity extends AppCompatActivity {
    
      @Override
      protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_mail);
      }
    // 这里就是添加的方法!
      public void onBack (View v) {
        finish();
      }
    }
    
    

    视图创建好了,方法什么也都准备好了,接下来就是要执行这个方法,为了方便起见,还是把这个方法加在上文中的点击事件中,打开RnModules.java,最终代码如下:

    package com.rncomponent;
    
    import android.content.Intent;
    import android.widget.Toast;
    
    import com.facebook.react.bridge.ReactApplicationContext;
    import com.facebook.react.bridge.ReactContextBaseJavaModule;
    import com.facebook.react.bridge.ReactMethod;
    
    /**
     * Created by 97974 on 2017/9/12.
     */
    
    public class RnModules extends ReactContextBaseJavaModule {
      private ReactApplicationContext mContext;
      public RnModules(ReactApplicationContext reactContext) {
        super(reactContext);
        mContext = reactContext;
      }
    
      @Override
      public String getName() {
        return "RnModules";
      }
      @ReactMethod
      public void Toasts (String msg) {
        Toast.makeText(mContext,msg, Toast.LENGTH_SHORT).show();
    // 下面便是添加的代码!
        Intent intent = new Intent(mContext, MailActivity.class);
        intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
        mContext.startActivity(intent);
      }
    }
    
    

    修改完成之后,直接点击Android studio上面的运行按钮,即可进行android项目打包测试:

    image.png

    最终效果如下:

    image.png

    相关文章

      网友评论

        本文标题:react-native调用原生方法!(调用原生activity

        本文链接:https://www.haomeiwen.com/subject/vdjfsxtx.html