react-native调用android原生方法！(Toast初试)

一、窗口一个react-native项目

react-native init RnComponent

二、用Android studio 打开项目android/build.gradle

期间提示你要升级什么的请忽略，如果你忍不住好奇点了升级，那接下来便是一堆bug等着你处理，骚年们，好运！

三、创建一个继承与ReactContextBaseJavaModule的Class

至于在哪里，找到目录最深的那个java文件便是了，

image.png

写上继承后会报错，懂点java的都知道，这时候把光标定位到报错的地方，按下alt+enter键，会给错误提示，照着一步步来就行了

image.png

按照上面的截图处理，基本上都可以解决报错问题（声明下，大牛请绕道，此篇文章只针对android菜鸟级的！）
RnModules代码如下：

package com.rncomponent;

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/11.
 */

public class RnModules extends ReactContextBaseJavaModule {
  private ReactApplicationContext mContext;
  public RnModules(ReactApplicationContext reactContext) {
    super(reactContext);
    mContext = reactContext;
  }

  @Override
  public String getName() {
    return "RnNativeModule"; //这里的name是必须的，最终在js中调用的时候以这个为准！
  }
  @ReactMethod   //这个也是必须的，不然会报错
  public void Toasts(String msg) {
    Toast.makeText(mContext,msg,Toast.LENGTH_SHORT).show();
  }
}

四、在Android原生这边创建一个类实现接口ReactPackage包管理器

并把第二步创建的类加到原生模块(NativeModule)列表里，此类继承接口 ReactPackage，最终代码如下：

package com.rncomponent;

import com.facebook.react.ReactPackage;
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;

/**
 * Created by 97974 on 2017/9/11.
 */

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

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

五、把RnPackages添加到ReactPackage列表里面。

MainApplication最终代码如下：

package com.rncomponent;

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 RnPackages()  //add
      );
    }
  };

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

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

到这里原生部分的代码算是完成了，接下来便是去react-native里面调用这个module。

六、修改index.android.js如下：

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

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

export default class RnComponent extends Component {
  call_button(){  
    NativeModules.RnNativeModule.Toasts('调用原生方法的Demo'); 
  }
  render() {
    return (
      
        
          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
        
      
    );
  }
}

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('RnComponent', () => RnComponent);

image.png