1. 程式人生 > >react-native 呼叫原生方法

react-native 呼叫原生方法

第一步,新建MyReactPackage.java:

package com.goodthingshappeneverday;
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 Administrator on 2016/10/18. */ public class MyReactPackage extends MainActivity implements ReactPackage { @Override public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) { List<NativeModule> modules=new
ArrayList<>(); //將我們建立的類新增進原生模組列表中 modules.add( new MyNativeModule(reactContext) ); return modules; } public List<Class<? extends JavaScriptModule>> createJSModules() { //返回值需要修改 return Collections.emptyList(); } @Override public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) { //返回值需要修改
return Collections.emptyList(); } }
第二步:新建MyNativeModule.java:
package com.goodthingshappeneverday;

import android.content.Context;
import android.content.Intent;
import android.os.PowerManager;
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.Timer;
import java.util.TimerTask;

/**
 * Created by Administrator on 2016/10/18.
 */
public class MyNativeModule extends ReactContextBaseJavaModule {
    private Context mContext;
    PowerManager pm;
    PowerManager.WakeLock wakeLock;
    public MyNativeModule(ReactApplicationContext reactContext) {
        super(reactContext);
        mContext = reactContext;
    }
    @Override
    public String getName() {

        //返回的這個名字是必須的,在rn程式碼中需要這個名字來呼叫該類的方法。
return "MyNativeModule";
    }
    //函式不能有返回值,因為被呼叫的原生程式碼是非同步的,原生程式碼執行結束之後只能通過回撥函式或者傳送資訊給rn那邊。
@ReactMethod
    public void rnCallNative(String msg){
        Toast.makeText(mContext,msg,Toast.LENGTH_SHORT).show();
    }
    @ReactMethod
    public void showTime(final String years, final String mource, final String day, final String houre, final String mm,final String ss) {
//        new MyUtils().showDialog(mContext);
//        new MyUtils().setNotifi(mContext,"2017","9","15","18","9","0");
//        Toast.makeText(mContext,"sda" ,Toast.LENGTH_SHORT).show();
         //下面的是呼叫的,直接複製,修改時間即可
final DialogActivity da = new DialogActivity();
        Timer timer = new Timer();
            timer.schedule(new TimerTask() {
                @Override
                public void run() {
                    if (da.getNowTime()[0].equals(years) &&
                            da.getNowTime()[1].equals(mource) &&
                            da.getNowTime()[2].equals(day)&&
                            da.getNowTime()[3].equals(houre)&&
                            da.getNowTime()[4].equals(mm)&&
                            da.getNowTime()[5].equals("0")
                            ) {
                        //獲取電源鎖,保持該服務在螢幕熄滅時仍然獲取CPU時,保持執行
Intent intent = new Intent(mContext, DialogActivity.class);
                        intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_EXCLUDE_FROM_RECENTS);
                        mContext.startActivity(intent);
                    }
                }
            }, 100, 1000);

    }
}
第三部:在MainApplication中 
new MyReactPackage();
第四部:在react-native中加入 
import {
  StyleSheet,
  Text,
  View,
  NativeModules,

} from 'react-native';
第五步:rn需要呼叫原生地方
呼叫 show Time,是自己定義的方法:NativeModules.MyNativeModule.showTime( year,months,day,hour,mm,ss);

相關推薦

react-native 呼叫原生方法

第一步,新建MyReactPackage.java: package com.goodthingshappeneverday; import com.facebook.react.ReactPackage; import com.facebook.react.bridge

react-native 呼叫原生模組詳解

 一,繼承 ReactContextBaseJavaModule 實現如下方法 自定義方法用 @ReactMethod註釋 /** * 日誌列印module * Created by ybj on 2016/2/26.

React-native 呼叫原生元件

一,繼承SimpleViewManager<View> 實現如下方法,自定義方法@ReactProp(name=”。。。。“)如下所示 ** * 圖片載入控制元件 * Created by ybj on 2016/2/24. */ public clas

react native 呼叫Android原生方法

來源:https://www.youtube.com/watch?v=WmJpHHmOKM8  教程:https://www.youtube.com/watch?v=GiUo88TGebs Breaking Down Bridging in React Native by Peggy R

react-native呼叫Android原生UI元件

當react-native的UI元件不能滿足需求時,可以考慮在原生自定UI元件,讓RN呼叫.使用原生UI所考慮的問題: 一.原生UI被呼叫; 二.修改原生UI屬性值; 三.捕捉原生UI的響應; 四.RN向原生UI元件發訊息; 下面貼上程式碼,逐步分析,實現: 1.在原生裡

React-native呼叫Android原生模組

準備工作:具體詳情參考React-Native官方文件 IDE: WebStorm 和Android Studio(webstorm不支援java高亮,所以用AS輔助下) demo放到github上了,有需要的可以參考一下.  下載demo 1.為什麼呼叫原生的一

React Native呼叫Android原生程式碼實現車牌識別功能【附效果圖附原始碼】

        這段時間研究了下React Native,Facebook推出的,結合了Web應用和Native應用的優勢,可以使用JavaScript來開發iOS和Android原生應用,決定簡單研究下,於是開始搭建環境,編寫HelloWorld,完成後又覺得HelloWo

React Native 呼叫iOS原生功能—直播

專案 中 採用React Native 開發 ,觀看直播呼叫iOS 原生介面 RN程式碼 import React, { Component } from 'react'; import { Platform, StyleSheet, Text, V

React Native之內部方法常用幾種寫法和呼叫規則

1 簡單部分程式碼 export default class App extends Component<Props> { render() { return (

React Native Android原生方向進階一

雖然說react native的設計初衷是為了敏捷開發,write once,run anywhere,但是還是開放了原生接入這一高階功能,而原生也是一位這個開發方向一個繞不過去的坎,今天先跑了一下流程,總結一下先 1、react-native init mengft_module

react native 呼叫手機內建地圖

GitHub:https://github.com/starlight36/react-native-map-linking Android: 高德地圖 百度地圖 iOS: 高德地圖 百度地圖 蘋果地圖 使用:npm install reac

動手建立一個自己的「React native原生模組

前言 我們在使用RN的時候,會發現RN提供了很多Module供JS呼叫,這些Module能夠滿足我們一些基礎的應用場景,但是在實際的專案中,必定會有一些互動邏輯需要我們自己去實現,這時候就需要我們自定義一些Module供JS呼叫,那麼怎麼才能讓JS呼叫到我們自定義的Module呢? 下面我們就一步步的去實現

react native接入原生專案(mac pro)

首先保證安裝了node,watchman,yarn。 1.新建一個資料夾A,裡面新建一個資料夾android,然後把專案根目錄下所有內容放入這個android裡。直接全選複製的話沒有git,可以把整個專案移過去再改名為android。 2.在A下新建package.json: {

React Native 精解與實戰》書籍連載「React Native 原始碼學習方法及其他資源」

此係列文章將整合我的 React 視訊教程與 React Native 書籍中的精華部分,給大家介紹 React Native 原始碼學習方法及其他資源。 最後的章節給大家介紹 React Native 原始碼的查閱方法,以便你進行更加高階的開發與研究時參閱,並分享了開發過程中可能遇到的眾多問題的解決方案,以

React-Native呼叫系統分享元件Share元件的使用

title: React-Native呼叫系統分享Share元件的使用 tags: react-native 一. 方法 share sharedAction dismissedAction 二、具體說明 1.share 介面: static share

React Native iOS原生模組開發實戰|教程|心得|如何建立React Native iOS原生模組

尊重版權,未經授權不得轉載 本文出自:賈鵬輝的技術部落格(http://blog.csdn.net/fengyuzhengfan/article/details/54691432) 告訴大家一個好訊息,為大家精心準備的React Native視訊教程釋出了,大家

React Native Android原生模組開發實戰|教程|心得|如何建立React Native Android原生模組

尊重版權,未經授權不得轉載 本文出自:賈鵬輝的技術部落格(http://blog.csdn.net/fengyuzhengfan/article/details/54691503) 告訴大家一個好訊息,為大家精心準備的React Native視訊教程釋出了,大家

React Native原生iOS Objective-C的互動解決方案

用一個RCTRootView作為iOS裡一個Controller的view。在RN層的左上角返回按鈕點選後pop回iOS層。發現無法執行,除錯發現controller的navigationCont的值是空的。發現與RN互動的這個self地址和iOS層的self並不是同一個

React Native封裝原生元件釋出到npm

因為一個任務,要寫原生的獲取使用者手機資料夾,實現使用者自定義資料夾的功能,寫好了之後嘗試封裝成元件。1. 首先,有一個rn專案,用Adnroid Studio開啟 android -> app -> build.gradle如圖新建一個 Android Modu

WKWebView無法接受到JS呼叫原生方法的回撥.

專案中,我們使用了UIWebView,Web端用MobileSelect.js,我們UIWebView始終無法彈出列表選擇框,無奈之下,改用了WKWebView. WKWebView效能真的是比UIWebView好,但是缺點呢,網上也有很多談到的,也就不囉嗦了