React Native 学习笔记十三（原生模块之Toast）

 在学习官网上的Toast 的过程中 出现很多的坑 

废话就不说了 官网上都有 官网讲解

实现思路 ：

我们之前已经将react-native 嵌入原生了 那么 我们就在之前的基础上进行修改就好了   

创建ToastUtils.java 继承ReactContextBaseJavaModule 我们要明确自己的目的 就是使用js调用 Toast 就像android 原生一样 能够在屏幕底端进行输出  那么我们需要自己封装方法 供js调用  我们希望调用的形式为ToastShow.show('des',ToastShow.LONG) 那么我们就要自定义 show方法 以及常量 来提供给js

所以具体代码的实现如下：

import android.widget.Toast;


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

import java.util.HashMap;
import java.util.Map;

import javax.annotation.Nullable;

/**
 * Created by zhangyanjiao on 17/9/19.
 *
 * 功能：在js中写Toast.show('toast text',Toast.SHORT) 可以像原生的toast一样输出东西
 * 注：RN已经内置了一个名为ToastAndroid的模块
 */

public class ToastUtils extends ReactContextBaseJavaModule{
    private static final String DURATION_SHORT_KEY="SHORT";
    private static final String DURATION_LONG_KEY="LONG";
    public ToastUtils(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    /**
     *该方法的返回值 的RCT前缀可以自动被移除  所以 即使返回值是RCTToast 在js中也会编译通过
     * 在js中会根据这个方法返回的字符串来查找对应的类
     * @return
     */
    @Override
    public String getName() {
        return "ToastShow";
    }

    /**
     * 该方法 不一定需要实现  所以可能返回值为空  一般用来返回一些可以被js同步访问的常量 或者是预定义的值
     * 在本类中 我们需要给js两个常量
     * @return
     */
    @Nullable
    @Override
    public Map<String, Object> getConstants() {
        final HashMap<String, Object> constants = new HashMap<>();
        constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);
        constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);
        return constants;
    }

    /**
     * 要导出一个方法给JavaScript使用，Java方法需要使用注解@ReactMethod。方法的返回类型必须为void。
     * React Native的跨语言访问是异步进行的，所以想要给JavaScript返回一个值的唯一办法是使用回调函数或者发送事件
     * 下面的参数类型在@ReactMethod注明的方法中，会被直接映射到它们对应的JavaScript类型。
     Boolean -> Bool
     Integer -> Number
     Double -> Number
     Float -> Number
     String -> String
     Callback -> function
     ReadableMap -> Object
     ReadableArray -> Array
     * @param msg 弹出的提示信息
     * @param duration 显示事件长短
     */
    @ReactMethod
    public void show(String msg,int duration){
        Toast.makeText(getReactApplicationContext(),msg,duration).show();
    }

}

然后要进行注册 否则的话  js将无法找到该类

创建 RegistPackage.java 实现ReactPackage接口

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 RegistPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new ToastUtils(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

.addPackage(new RegistPackage())

最后为了在js文件中更方便的使用 我们对调用进行封装

创建ToastShow.js文件  具体实现如下

'use strict'
/**
 * This exposes the native ToastAndroid module as a JS module. This has a function 'show'
 * which takes the following parameters:
 *
 * 1. String message: A string with the text to toast
 * 2. int duration: The duration of the toast. May be ToastAndroid.SHORT or ToastAndroid.LONG
 */
import { NativeModules } from 'react-native';

// 下一句中的ToastAndroid即对应上文
// public String getName()中返回的字符串
// 练习时请务必选择另外的名字！

export default NativeModules.ToastShow;

此时我们就可以安心引用了

在index.android.js文件中

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

var { NativeModules } = require('react-native');

 class MyApp extends Component {

    constructor(props) {
        super(props);

    }


    render() {
    ToastShow.show('我是弹窗',ToastShow.LONG);
        return(
            <View >
               <Text>{'hahahhahhahah'}</Text>
            </View>
        )

    }
}

AppRegistry.registerComponent('MyApp', () => MyApp);

记住修改完 要进行重新的编译  运行 直接使用热更新的话 会报错