zoukankan      html  css  js  c++  java
  • 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);
    
  • 相关阅读:
    AgileEAS.NET平台视频会议培训第二辑简单插件开发应用演练(速度下载)
    给大家分享一个培训的PPT:面向构件的组织级开发模式探讨
    AgileEAS.NET SOA 中间件平台工作流系统介绍
    “医疗信息化行业之中的联发科” 我们在医疗行业中的定位及目标
    AgileEAS.NET SOA 平台5.1开发包介绍
    实例演示如何使用AgileEAS.NET SOA平台工作流进行业务流程自定义
    Silverlight企业应用开发实践AgileEAS.NET平台5.0 Silverlight支撑预览
    AgileEAS.NET平台视频会议培训第三辑插件的安装、配置以及账户权限系统演练
    Stream Part.6
    Stream Part.7
  • 原文地址:https://www.cnblogs.com/allenxieyusheng/p/7044360.html
Copyright © 2011-2022 走看看