React Native 学习笔记十四（原生模块之数据回调）

在使用原生模块的时候无法避免数据的获取  关于数据的获取 我这里模仿了网络请求获取数据 通过回调的方式 完成数据从java到js的传递

官网上 基本上都是坑 写这篇文章给想我一样的小白来看  大神级别的 勿喷

废话不说 上代码  实现思路和 上一篇文章一样 不会的朋友可以看看上一章

创建 NetMoudle.java 实现网络请求 

package com.example.zhangyanjiao.helloreact.netMoudle;import android.util.Log;import com.facebook.react.bridge.Callback;import com.facebook.react.bridge.ReactApplicationContext;import com.facebook.react.bridge.ReactContextBaseJavaModule;import com.facebook.react.bridge.ReactMethod;/** * Created by zhangyanjiao on 16/9/20. */public class NetMoudle extends ReactContextBaseJavaModule {    private static final String MOUDLE_NALE = "Net";    public NetMoudle(ReactApplicationContext reactContext) {        super(reactContext);    }    @Override    public String getName() {        return MOUDLE_NALE;    }    /**     * 创建给js调用的方法 将网络请求的结果以回调的方式传递给js     * @param url     * @param callback     */    @ReactMethod    public void getResult(String url, final Callback callback){        Log.e(MOUDLE_NALE,"正在请求数据");        new Thread(new Runnable() {            @Override            public void run() {                try{//                    模拟网络请求数据的操作                    String result="我是请求结果";                    Log.e(MOUDLE_NALE,"请求数据完成");                    callback.invoke(true,result);                }catch (Exception e){                    Log.e(MOUDLE_NALE,"对不起，网络不给力");                }            }        }).start();    }}

注册 

package com.example.zhangyanjiao.helloreact;import com.example.zhangyanjiao.helloreact.netMoudle.NetMoudle;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 zhangyanjiao on 16/9/20. */public class RegistNetPackage implements ReactPackage {    @Override    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {        List<NativeModule> modules = new ArrayList<>();        modules.add(new NetMoudle(reactContext));        return modules;    }    @Override    public List<Class<? extends JavaScriptModule>> createJSModules() {        return Collections.emptyList();    }    @Override    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {        return Collections.emptyList();    }}

在mainActivity中进行添加(不会的看上一篇文章有完整代码)

.addPackage(new RegistNetPackage())

创建NativeGetResult.java封装方法 

'use strict';import { NativeModules } from 'react-native';export default NativeModules.Net;

在js文件中使用

import React, { Component } from 'react';  import {      AppRegistry,      StyleSheet,      Text,      View,      ToastAndroid    } from 'react-native';import NatGetResult from './NetGetResult'import ToastShow from './ToastShow'var { NativeModules } = require('react-native');   class MyApp extends Component {    constructor(props) {          super(props);        }          render() {                NatGetResult.getResult('http://baidu.com',                                             (code,result)=>{                                                ToastShow.show('callback:'+code+result,ToastShow.LONG);});        return(              <View >                 <Text>{'hahahhahhahah'}</Text>            </View>        )    }  }    AppRegistry.registerComponent('MyApp', () => MyApp);