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);