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; importjava.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=newArrayList<>(); //將我們建立的類新增進原生模組列表中 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好,但是缺點呢,網上也有很多談到的,也就不囉嗦了