RN 调用安卓的原生方法(实现Toast效果)

Posted 谢玉胜的技术文章

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了RN 调用安卓的原生方法(实现Toast效果)相关的知识,希望对你有一定的参考价值。

首先明确一点,坑实在是是太多了~神奇呀!

ok!

基本思路: 

1.用AS打开一个已经存在的项目(这里可以打开项目中的android也可以是android里面的build.gradle)

2.在AS里新建一个类,这个类继承  ReactContextBaseJavaModule,在这里的所写的原声的方法就将被RN的JS调用

3.在AS里新建一个class 实现接口  ReactPackage,并且把刚创建的类放到包管理器里面

4.将刚创建的包管理器添加到MainApplication里面 

5.在js这边调用(注意:需要重新的run-android)

就以上五步就可以实现基本的调用安卓原生的方法,具体如何实现,最好依照官网所叙述,这里就简单的贴下我自己的所实现的代码:

从第二步开始:

package com.now;

import android.content.Context;
import android.widget.Toast;

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

/**
 * Created by xieyusheng on 2017/6/18.
 */

public class ToastModule extends ReactContextBaseJavaModule {
    private Context mContext;
    public ToastModule(ReactApplicationContext reactContext) {
        super(reactContext);
        mContext=reactContext;
    }
    @Override
    public String getName() {
        //这里名字取要慎重,不能个RN的组件相同
        return "ToastModule";
    }
    @ReactMethod
    public void rnCallNative(String msg){
        Toast.makeText(mContext,msg,Toast.LENGTH_LONG).show();
    }
}

 3.第三部

package com.now;

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;

/**
 * Created by xieyusheng on 2017/6/18.
 */

public class AnExampleReactPackage implements ReactPackage {

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        //添加到里面哦
        modules.add(new ToastModule(reactContext));
        return modules;
    }

    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Collections.emptyList();
    }

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

 4 ;

package com.now;

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 AnExampleReactPackage()
      );
    }
  };

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

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

最后的调用:

/**
 * 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 now extends Component {
  test(){
      //原生-原生模块.原生模块li的方法
      NativeModules.ToastModule.rnCallNative("now you see me");
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome} onPress={this.test.bind(this)}>
          sdsd 
        </Text>
      </View>
    );
  }
}

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(‘now‘, () => now);

 

以上是关于RN 调用安卓的原生方法(实现Toast效果)的主要内容,如果未能解决你的问题,请参考以下文章

RN系列:Android原生与RN如何交互通信

RN - 封装Android原生WebView组件,实现JS获取原生消息回调及JS控制native组件

简单实现RN调用原生方法

RN调用原生的方法

react-native 调用原生方法

RN 调用原生WebPage 解决微信支付Referer问题