React-Native 自封装原生模块
来源:互联网 发布:微网站模板源码下载 编辑:程序博客网 时间:2024/05/16 08:08
React-Native 出现也有一段时间了,其实我们在一些应用中已经接触过基于它的或效果类似于它的App,如手机淘宝。在每年双十一时我们会发现没有更新app也会有一些不同的界面。当然你可能认为WebView也可以做到这些。但实际上RN与WebView是不同的,RN的控件正如其名字中的Native描述,是原生的。还有据说微信的小程序也是基于RN做的。甚至有人说RN是移动开发的未来。就本人看来,RN确实在UI开发上提供了一种新的思路,新生的东西学一些没有什么坏处,万一赶上时代了呢?
进入正题。在RN中文网上看了原生模块的的介绍,按着原文的指导敲了一遍,发现有些不太一样特此在这记录分享一下。
我发现我的排版跟shi一样
首先在这里说明一下,我是先在Android Studio(AS)中新建的空白工程,然后再一步步搭建RN的,如果客官是Clone的RN的demo工程然后修改的,建议还是观看官方教程。
(假设电脑中已经装好RN的环境了)
①、进入工程根目录:npm init(可以直接在AS的Terminal中npm init)
②、npm install –save react react-native(执行完这条指令后注意了,会让你输入一系列信息,跟着输入就好,默认的直接enter键,这步生成package.json)。
③、在package.json的script字段加入”start”: “node node_modules/react-native/local-cli/cli.js start”(注意该加逗号的地方加逗号)
④、根目录手动创建index.android.js,然后添加一堆代码。
以上步骤我基本粗略说说,可以看官网教程嵌入到已有应用
接下来的问题出现概率就比较大了
⑤、在自己工程build.gradle(app)中添加依赖
dependencies { ... compile "com.facebook.react:react-native:+" // From node_modules. }
⑥、在工程Build.grade(Project)中添加(注意:如果你的node_modules文件夹在工程根目录中,就是$rootDir/node_modules/react-native/android”的格式)。
allprojects { repositories { ... maven { // All of React Native (JS, Android binaries) is installed from npm url "$rootDir/../node_modules/react-native/android" } } ...}
⑦、接下来就是添加权限声明,注册调试用的Activity,一定在Application标签下注册,然后添加一些原声代码什么的,可以直接看上面的嵌入的官网链接,还是直奔主题
开始封装我们的ToastJS原声模块。
这个模块也是模仿官方教程来的。
⑧、注册模块之前官方说的都没什么问题,可以照着做都是一样的。然后注册模块这里,我们创建了一个自己模块专属的类。
package cn.scrovor.gogoo.Modules;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;public class ScrovorReactPackage implements ReactPackage { @Override public List<Class<? extends JavaScriptModule>> createJSModules() { return Collections.emptyList(); } @Override public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) { return Collections.emptyList(); } @Override public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) { List<NativeModule> modules = new ArrayList<>(); modules.add(new ToastJS(reactContext)); return modules; }}
然后官方说在MainApplication中进行返回该Package信息,但我们自己写的可能根本就没有啊?!
其实自己写的可以在这里进行同样操作。
mReactRootView = new ReactRootView(this); mReactInstanceManager = ReactInstanceManager.builder() .setApplication(getApplication()) .setBundleAssetName("index.android.bundle") .setJSMainModuleName("index.android") .addPackage(new MainReactPackage()) .addPackage(new ScrovorReactPackage()) .setUseDeveloperSupport(BuildConfig.DEBUG) .setInitialLifecycleState(LifecycleState.RESUMED) .build();
然后就java部分的就完成了。
⑨、在JS部分封装成模块,原官方没有说清怎么封装,以及封装模块如何放置。这里说一下。
根目录新建 Toast.js文件,放入如下代码:
'use strict'; import {NativeModules} from 'react-native'; // ToastJS 对应自己写的原生控件 export default NativeModules.ToastJS;
然后再index.android.js中调用
import ToastJS from './ToastJS.js';...const onButtonPressed = () =>{ ToastJS.show("my native Component");};
当然你也可以自己新建一个文件夹放置自己的原声模块,然后import时路径写对就可以了。
Demo的GitHub地址,有帮助的话记得Star奥。老铁没毛病吧。
- React-Native 自封装原生模块
- React Native 原生模块封装、发布、调用
- React-Native开发之原生模块封装(Android)升级版
- React Native 原生模块封装、发布、调用 (Android)
- react native使用原生模块
- React Native十四:原生模块
- React Native使用指南-原生模块
- React Native创建原生模块
- react native使用原生模块
- React Native 封装原生UI组件(iOS)
- React Native封装原生UI组件
- react-native 在android封装原生listView
- React Native封装Android原生控件
- Android React Native使用原生模块
- Android React Native使用原生模块
- React-Native 原生模块(iOS)调用
- react-native 调用原生模块详解
- React Native添加Android原生模块
- 使用minidom来处理XML的示例(Python 学习)
- iOS 开源库、文章、源码整理
- 功能测试
- 递归与动态规划
- Java编程思想读书笔记--一切都是对象
- React-Native 自封装原生模块
- Java中的线程创建基础
- FFmpeg视频录制压缩处理走过的坑
- me
- SQLite在多线程环境下的应用,threadsafe
- 打架 孤立 堕落 对游戏的看法
- svn分支管理的使用与经验
- Javascript 作用域 闭包 原型和原型链
- SOJ 1035