ReactNative-JS 調(diào)用原生方法實(shí)例代碼
第一步首先創(chuàng)建ReactNative 模塊類繼承ReactContextBaseJavaModule
package com.mixture; import android.content.Context; import android.widget.Toast; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.bridge.ReactContextBaseJavaModule; import com.facebook.react.bridge.ReactMethod; /** * Created by Administrator on 2016/9/22. */ public class MyNativeModule extends ReactContextBaseJavaModule { public static final String REACTCLASSNAME = "MyNativeModule"; private Context mContext; public MyNativeModule(ReactApplicationContext reactContext) { super(reactContext); mContext = reactContext; } @Override public String getName() { return REACTCLASSNAME; } /** * 必須添加反射注解不然會(huì)報(bào)錯(cuò) * 這個(gè)方法就是ReactNative將要調(diào)用的方法,會(huì)通過此類名字調(diào)用 * @param msg */ @ReactMethod public void callNativeMethod(String msg) { Toast.makeText(mContext, msg, Toast.LENGTH_SHORT).show(); } }
第二步創(chuàng)建一個(gè)React包管理器實(shí)現(xiàn)ReactPackage將每個(gè)模塊放到模塊集合中
package com.mixture; 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/9/22. */ public class MyReactPackage implements ReactPackage { @Override public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) { List<NativeModule> modules = new ArrayList<>(); modules.add(new MyNativeModule(reactContext)); return modules; } @Override public List<Class<? extends JavaScriptModule>> createJSModules() { return Collections.emptyList(); } @Override public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) { return Collections.emptyList(); } }
第三步在應(yīng)用入口注冊(cè)這個(gè)React包管理器
package com.mixture; import android.app.Application; import android.util.Log; import com.facebook.react.ReactApplication; import com.facebook.react.ReactInstanceManager; import com.facebook.react.ReactNativeHost; import com.facebook.react.ReactPackage; import com.facebook.react.shell.MainReactPackage; import java.util.Arrays; import java.util.List; public class MainApplication extends Application implements ReactApplication { private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { @Override protected boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; } @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), //在應(yīng)用中注冊(cè)這個(gè)包管理器 new MyReactPackage() ); } }; @Override public ReactNativeHost getReactNativeHost() { return mReactNativeHost; } }
第四步就是在ReactNative中調(diào)用react-native中提供一個(gè)NativeModules通過模塊名字和方法名字進(jìn)行調(diào)用
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, {Component} from 'react'; import { AppRegistry, StyleSheet, Text, View, NativeModules, } from 'react-native'; class Mixture extends Component { render() { return ( <View style={styles.container}> <Text style={styles.instructions} onPress={() => this.onClick()}> 調(diào)用用原生方法 </Text> </View> ); } /** * 調(diào)用原生方法 */ onClick() { NativeModules.MyNativeModule.callNativeMethod('成功調(diào)用原生方法'); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, }); AppRegistry.registerComponent('Mixture', () => Mixture);
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
相關(guān)文章
如何使用Redux Toolkit簡(jiǎn)化Redux
這篇文章主要介紹了如何使用Redux Toolkit簡(jiǎn)化Redux,幫助大家更好的理解和學(xué)習(xí)使用React框架,感興趣的朋友可以了解下2021-04-04React Native實(shí)現(xiàn)地址挑選器功能
這篇文章主要為大家詳細(xì)介紹了React Native仿地址挑選器功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10使用React和Redux Toolkit實(shí)現(xiàn)用戶登錄功能
在React中,用戶登錄功能是一個(gè)常見的需求,為了實(shí)現(xiàn)該功能,需要對(duì)用戶輸入的用戶名和密碼進(jìn)行驗(yàn)證,并將驗(yàn)證結(jié)果保存到應(yīng)用程序狀態(tài)中,在React中,可以使用Redux Toolkit來管理應(yīng)用程序狀態(tài),從而實(shí)現(xiàn)用戶登錄功能,需要詳細(xì)了解可以參考下文2023-05-05React?Hooks中?useRef和useImperativeHandle的使用方式
這篇文章主要介紹了React?Hooks中?useRef和useImperativeHandle的使用方式,文中說明了useRef和useCallback一起使用,?可以解決閉包陷阱的問題,本文結(jié)合實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10如何在React?Native開發(fā)中防止滑動(dòng)過程中的誤觸
在使用React?Native開發(fā)的時(shí),當(dāng)我們快速滑動(dòng)應(yīng)用的時(shí)候,可能會(huì)出現(xiàn)誤觸,導(dǎo)致我們會(huì)點(diǎn)擊到頁面中的某一些點(diǎn)擊事件,誤觸導(dǎo)致頁面元素響應(yīng)從而進(jìn)行其他操作,表現(xiàn)出非常不好的用戶體驗(yàn)。2023-05-05react-redux的connect與React.forwardRef結(jié)合ref失效的解決
這篇文章主要介紹了react-redux的connect與React.forwardRef結(jié)合ref失效的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05React-Native之定時(shí)器Timer的實(shí)現(xiàn)代碼
本篇文章主要介紹了React-Native之定時(shí)器Timer的實(shí)現(xiàn)代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10