React Native调用Android原生模块

最新推荐文章于 2018-06-14 23:27:42 发布

小_学_生

最新推荐文章于 2018-06-14 23:27:42 发布

阅读量558

点赞数

分类专栏： React Native（Android）文章标签： react native

本文链接：https://blog.csdn.net/jujishou521/article/details/52356399

版权

React Native（Android）专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

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

调用原生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>