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添加内容:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="#216584">

</LinearLayout>

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

<activity android:name="com.untitled.A" />

(熟悉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<NativeModule> createNativeModules(ReactApplicationContext reactContext) {

        List<NativeModule> modules = new ArrayList<>();

        modules.add(new MyModule(reactContext));

        return modules;

    }

    @Override

    public List<Class<? extends JavaScriptModule>> createJSModules() {

        return Collections.emptyList();

    }

    @Override

    public List<ViewManager> 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<ReactPackage> getPackages() {

      return Arrays.<ReactPackage>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 (

      <View style={styles.container}>

        <Text style={styles.welcome} onPress={()=> this.onMyPress()}>

          Welcome to React Native!

        </Text>

        <Text style={styles.instructions}>

          To get started, edit index.android.js

        </Text>

        <Text style={styles.instructions}>

          Double tap R on your keyboard to reload,{'\n'}

          Shake or press menu button for dev menu

        </Text>

      </View>

    );

  }

  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! 就可以验证了