React Native调用Android原生模块

原创 2016年08月29日 20:46:51

    日知其所亡,月勿忘其所能,可谓学也已矣。

    很久前测试过。但是今天又温故下,发现好多细节有所遗忘,(忘性还真大)还是记录下吧。

    调用原生Toast模块。

  

    1.创建ToastModule   java类。

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;


public class ToastModule extends ReactContextBaseJavaModule {

    private static final String DURATION_SHORT_KEY = "SHORT";
    private static final String DURATION_LONG_KEY = "LONG";

    public ToastModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return "MyToastAndroid";
    }

    @Override
    public Map<String, Object> getConstants() {
        final Map<String, Object> constants = new HashMap<>();
        constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);
        constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);
        return constants;
    }

    @ReactMethod
    public void show(String message, int duration) {
        Toast.makeText(getReactApplicationContext(), message, duration).show();
    }

}


    2.注册模块
<pre name="code" class="java">class ToastPackage implements ReactPackage {

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

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

  @Override
  public List<NativeModule> createNativeModules(
                              ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();

    modules.add(new ToastModule(reactContext));

    return modules;
  }
    

    3.在<code>MainApplication.java</code>中添加你自己定义的  <span><span></span></span>new ToastPackage() <span></span><span></span>
4.为了方便调用,可以在创建ToastAndroid.js 作为专门的模块,


import { NativeModules } from 'react-native';


export default NativeModules.MyToastAndroid;

5.index.android.js

<span style="font-size:12px;">* Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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


import ToastAndroid from './ToastAndroid';

class MyDemo extends Component {
    render() {
        return (
            <View >
                <TouchableWithoutFeedback
                    onPress={() =>
           ToastAndroid.show('show toast', ToastAndroid.SHORT)}>
                    <Text style={styles.text}>Click me.</Text>
                </TouchableWithoutFeedback>
            </View>
        );
    }
}

const styles = StyleSheet.create({

    text: {
        color: 'black',
    },
});

AppRegistry.registerComponent('MyDemo', () => MyDemo);</span>


 




版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

react-native调用Android原生模块

今天学习了一下在react-native中调用原生安卓模块的使用,发现很多网上的文章都是直接照抄的文档,这样会有一些坑,导致最后无法运行或者成功调用,所以写下这个博客来分享,同时也记录一下学习过程,方...

React Native添加Android原生模块

新项目决定开始使用React Native,故也不得不学习新的知识。React Native简介此不做赘述,官网有详细的介绍。因RN出来的时间还算很短,所以很多东西并不是很完善...比如第三方库的丰富...

关于React-native里Android原生模块和组件的写法

原生模块就是把Android里的API导出来给JS调用,说简单一点,就是让自己写的Java函数能够在React Native的js代码里调用。比如一些实现高性能的、多线程的代码,还有譬如图片处理、数据...

Android React Native使用原生模块

有时候我们的App需要访问平台API,并且React Native可能还没有相应的模块包装;或者你需要复用一些Java代码,而不是用Javascript重新实现一遍;又或者你需要实现某些高性能的、多线...

React Native 中的 Android 原生模块

当使用 React Native 开发 Android 应用时,你可能需要使用没有被 React Native 封装的模块。但你可以使用 Java 编写原生模块,然后选择性的暴露公共接口到 React...

Android React Native使用原生模块

var React = require('react-native'); var { NativeModules, } = React; var Log1= NativeModules.L...

react native 学习笔记----使用Android的原生模块

有时候App需要访问平台API,但React Native可能还没有相应的模块包装;或者你需要复用一些Java代码,而不是用Javascript重新实现一遍;又或者你需要实现某些高性能的、多线程的代码...

React Native调用原生模块--Toast

React Native开发中少不了调用原生模块,本文以Toast为例介绍如何调用Android Toast模块. 官方文档:http://reactnative.cn/docs/0.39/nativ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)