react native js调用android原生activity

rn编写的js页面怎样跳转到自己写的android activity中呢?只需下面简单几步

1.我们搭建好rn环境后,创建rn项目并运行到设备上(本文省略),在项目的目录下 /android/app/src/main/java/com/项目名/ 下新建一个简单的activity类

package com.untitled;
import android.app.Activity;
import android.os.Bundle;
import android.support.annotation.Nullable;


public class A extends Activity {
  @Override
  protected void onCreate(@Nullable Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.layout);
  }
}

然后在 /android/app/src/main/res 目录下新建layout目录并创建layout.xml添加内容:


    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#216584">


再在/android/app/src/main/androidmanifest中配置新建的activity,加上下面这句话即可



(熟悉android的同学第一步按自己的喜好写就好了,只是个简单demo)

2.在android/app/src/main/java/com/项目名/ 下新建一个module类,继承reactcontextbasejavamodule,此类作用是定义rn与android的交互方法,本文以启动activity为例,还是用intent去start一个activity,参数为类名,这样js调用的时候直接传入想要启动activity的类名即可

package com.untitled;

import android.app.Activity;
import android.content.Context;

import com.facebook.react.bridge.ReactContextBaseJavaModule;
import android.content.Intent;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.JSApplicationIllegalArgumentException;

public class MyModule extends ReactContextBaseJavaModule {

    public static final String CLASS_NAME = "MyModule";
    private Context mContext;

    public MyModule(ReactApplicationContext reactContext) {
        super(reactContext);
        mContext = reactContext;
    }

    @Override
    public String getName() {
        return CLASS_NAME;
    }

    @ReactMethod
    public void startMyActivity(String name){
        try{
            Activity currentActivity = getCurrentActivity();
            if(null!=currentActivity){
                Class aimActivity = Class.forName(name);
                Intent intent = new Intent(currentActivity,aimActivity);
                currentActivity.startActivity(intent);
            }
        }catch(Exception e){
            throw new JSApplicationIllegalArgumentException(e.getMessage());
        }
    }
}


3.在android/app/src/main/java/com/项目名/ 下新建一个package类,继承reactapplication,在其中实现creatnativemodules方法,并将上一步的module添加到集合中

package com.untitled;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class MyPackage implements ReactPackage {
    @Override
    public List createNativeModules(ReactApplicationContext reactContext) {
        List modules = new ArrayList<>();
        modules.add(new MyModule(reactContext));
        return modules;
    }

    @Override
    public List> createJSModules() {
        return Collections.emptyList();
    }

    @Override
    public List createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

4.在创建项目就有的android/app/src/main/java/com/项目名/mianapplication中的getpackages创建上步的package实例

package com.untitled;

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List getPackages() {
      return Arrays.asList(
          new MainReactPackage(),
          new MyPackage()//在这!!!
      );
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}


5.最后在js代码中调用就可以,在创建项目就有的项目根目录下android的js入口文件,index.android.js中添加

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  NativeModules
} from 'react-native';

export default class untitled extends Component {
  render() {
    return (
     
        this.onMyPress()}>
          Welcome to React Native!
       
       
          To get started, edit index.android.js
       
       
          Double tap R on your keyboard to reload,{'\n'}
          Shake or press menu button for dev menu
       
     
    );
  }
  onMyPress(){
        NativeModules.MyModule.startMyActivity('com.untitled.A')
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('untitled', () => untitled);


运行代码 点击welcome to react native! 就可以验证了