react-native Android原生モジュールを呼び出します.

3074 ワード

react-native Android原生モジュールを呼び出します.
JavascriptからToastメッセージを開始します.

Cuttoast.javaファイル

を作成します.

public class CustomToast extends ReactContextBaseJavaModule {
    private static final String DURATION_SHORT_KEY = "SHORT";
    private static final String DURATION_LONG_KEY = "LONG";

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

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

    /**
     *        getContants        JavaScript     。
     *          ，         JavaScript                。
     */
    @Nullable
    @Override
    public Map getConstants() {
        final Map 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                       
     * @param message
     * @param duration
     */
    @ReactMethod
    public void show(String message, int duration) {
        Toast.makeText(getReactApplicationContext(), message, duration).show();
    }


}

以下のパラメータタイプは@ReactMethodで示されている方法で、その対応するJavaScriptタイプに直接マッピングされます(例えば、上記のshow方法は@ReactMethodと表記されていますので、そのパラメータは以下のようにマッピングされます).

Boolean -> Bool
Integer -> Number
Double -> Number
Float -> Number
String -> String
Callback -> function
ReadableMap -> Object
ReadableArray -> Array

登録モジュールMyToastReact Paket.java

public class MyToastReactPaket implements ReactPackage {
    @Override
    public List createNativeModules(ReactApplicationContext reactContext) {
        List modules = new ArrayList<>();
        modules.add(new CustomToast(reactContext));
        return modules;
    }

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

MainApplicationに以下の

を追加します.

@Override
    protected List getPackages() {
      return Arrays.asList(
          new MainReactPackage(),
          new MyToastReactPaket()
      );
    }

jsコードJavaScript端のモジュールパッケージを追加してCuttoast.js

を作成します.

'use strict'
import {NativeModules} from 'react-native';
export default NativeModules.CustomToast;

6.試験例変更アプリ.js

import React, { Component } from 'react';
import { Text } from 'react-native';
import CustomToast from './CustomToast';

export default class HelloWorldApp extends Component {
  render() {
    return (
         CustomToast.show('12313123',CustomToast.SHORT)}>  Toast
    );
  }

ページ印刷Jsコード