关闭

React Native调用Android原生模块

标签: react native
200人阅读 评论(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>


 




0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:28710次
    • 积分:958
    • 等级:
    • 排名:千里之外
    • 原创:68篇
    • 转载:0篇
    • 译文:0篇
    • 评论:3条
    最新评论