ReactNative-JS调用原生方法实例代码

第一步首先创建反应性的模块类继承ReactContextBaseJavaModule

打包。混合；导入安卓。内容。语境；导入安卓。小部件。吐司；进口。com。脸书。做出反应。桥。对应用程序上下文做出反应；导入com。脸书。做出反应。桥。reatcontextbasejavamodule进口。com。脸书。做出反应。桥。反应法；/** *由管理员于2016年9月22日创建*/公共类MyNativeModule扩展了reacontextbasejavamodule { public static final String reat class name=' MyNativeModule '；私有上下文上下文；public MyNativeModule(reata applicationcontext reat context){ super(reat context)；mContext=reatcontext } @ Override public String getName(){ return reatclassname；} /** * 必须添加反射注解不然会报错* 这个方法就是反应性的将要调用的方法，会通过此类名字调用* @ param msg */@ ReactMethod public void callNativeMethod(字符串msg) { Toast.makeText(mContext，msg，Toast).长度_短).show()；}}第二步创建一个反应包管理器实现ReactPackage将每个模块放到模块集合中

打包。混合；进口。com。脸书。做出反应。反应包装；进口。com。脸书。做出反应。桥。JavaScript模块；进口。com。脸书。做出反应。桥。nativemodule进口。com。脸书。做出反应。桥。对应用程序上下文做出反应；进口。com。脸书。做出反应。ui管理器。viewmanager导入Java。乌提尔。ArrayList导入Java。乌提尔。收藏品；导入Java。乌提尔。列表；/** *由管理员于2016年9月22日创建*/公共类MyReactPackage实现react package { @ Override public listnatemodule createNativeModules(reattapapapplicationcontext){ listnatemodule=new ArrayList()；模块。添加(新的MyNativeModule(reactContext))；返回模块；} @覆盖公共列表类？扩展了JavaScript模块createJSModules(){返回集合。emptylist()；} @ Override public ListViewManager createViewManagers(reatapapplicationcontext react context){ return collections。emptylist()；}}第三步在应用入口注册这个反应包管理器

打包。混合；导入安卓。app。应用；导入安卓。乌提尔。日志；进口。com。脸书。做出反应。反应应用；进口。com。脸书。做出反应。反应实例管理器；进口。com。脸书。做出反应。reactnationhost进口。com。脸书。做出反应。反应包装；进口。com。脸书。做出反应。贝壳。mainreactpackage导入Java。乌提尔。数组；导入Java。乌提尔。列表；公共类主应用程序扩展应用实现react Application { private final ReactNativeHost mReactNativeHost=new react nativehost(this){ @ Override protected boolean getusedeveloper support(){ return build config .调试；} @覆盖受保护的listreatpackage getPackages(){ 0返回数组ReactPackageasList(新的MainReactPackage()，//在应用中注册这个包管理器new MyReactPackage())；} };@ Override public react native host getreact native host(){ return mreactnative host；}}第四步就是在反应性的中调用反应原生中提供一个本地模块通过模块名字和方法名字进行调用

/** *样本反应原生应用* https://github.com/facebook/react-native * @流程*/从"反应"导入反应、{组件};从“反应-原生”导入{ AppRegistry，样式表，文本，视图，NativeModules，}；类混合扩展了组件{ render(){ return(View style={ style。容器}文本样式={样式。说明} onPress={()=this。onclick()}调用用原生方法/Text/View)；} /** * 调用原生方法*/onClick() { NativeModules .mynativemodule。callnativemethod('成功调用原生方法');} }常量样式=样式表。创建({ container : { flex : 1，justifyContent: 'center '，alignItems: 'center '，backgroundColor: '#F5FCFF '，}，指令3360 { textalign : ' center '，color: ' # 333333 '，marginBottom:5，}，})；欣赏主义。注册表组件('混合物'，()=混合物)；感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！