葡京网站做中间商,网站分析一般要重点做哪几项内容,凡客诚品app,佛山个性化网站搭建前言
在 React Native 项目中可以看到 node_modules 文件夹#xff0c;这是存放 node 模块的地方#xff0c;Node.js 的包管理器 npm 是全球最大的开源库生态系统。提到npm#xff0c;一般指两层含义#xff1a;一是 Node.js 开放式模块登记和管理系统#xff0c;另一种是…前言
在 React Native 项目中可以看到 node_modules 文件夹这是存放 node 模块的地方Node.js 的包管理器 npm 是全球最大的开源库生态系统。提到npm一般指两层含义一是 Node.js 开放式模块登记和管理系统另一种是 Node.js 默认的模块管理器是一个命令行软件用来安装和管理 node 模块。本文旨在探讨如何在 React Native 中写一个自定义的 npm 模块类似于插件并上传到 npm 上供他人使用。
npm 使用介绍
npm 是一个 Node.js 模块安装 Node.js 会默认安装 npm可以在终端中使用以下命令来查看 npm 的版本
npm -v
升级 npm
sudo npm install npm -g
安装模块(安装完毕后会产生一个node_modules目录其目录下就是安装的各个node模块)
npm install ModuleName
查看 npm 配置
npm config list
设置代理
//设置 http 代理
npm config set proxy http://server:port
//设置 https 代理
npm config set https-proxy http://server:port
上面介绍了一些 npm 基本命令接下来就可以在本地创建一个模块啦。 首先打开终端中新建一个你想在此创建自定义模块的文件夹然后在命令行中登录 npm。输入以下命令
npm adduser
接下来会提示你输入用户名和密码还有邮箱一一完成后就可以输入以下命令来查看当前 npm 用户了
npm whoami
如果正确显示了刚才注册的用户名说明登录成功了。然后就使用以下命令来创建 npm 模块
npm init
执行上述命令后会引导你创建一个package.json文件包括名称、版本、作者这些信息等。
创建模块
这里要提一下为什么要写一个自定义模块。因为 React Native 虽然实现了很多 Native 组件并且提供了丰富的 API但是有些原生库还是不支持的而且有很多开源的组件和库是面向原生的因此要想在 React Native 中使用这些组件和库就需要自己定义一个模块这样也方便别人集成。接下来我们直接进入正题。写一个 React Native 中可以使用的自定义模块。在命令行中执行
react-native init AwesomeProject
初始化一个 React Native 项目。这里以 Android 为例用 Android Studio 选择菜单 File-open 打开 AwesomeProject 文件夹下的 android 文件夹然后选择 File - New - New Module选择创建一个 Android Library如图 如图所示这里新建了一个 Library module接下来点击 finish 就可以看到如下的目录结构 然后将所需要依赖的 jar 放到 libs 目录下这里以使用 jpush-sdk 为例将官网上下载的 libs 复制到 libs 下把相关的资源文件放到 res 文件夹下再把 AndroidManifest 文件内容复制过来更改一下包名最后在 build.gradle 中配置一把如下这里要注意把 targetSdkVersion 改成 22在23上运行可能会闪退
apply plugin: com.android.library
android { compileSdkVersion 23 buildToolsVersion 23.0.2 defaultConfig { minSdkVersion 16 targetSdkVersion 22 versionCode 1 versionName 1.0 manifestPlaceholders [ JPUSH_APPKEY: yourAppKey, //在此修改JPush的AppKey APP_CHANNEL: developer-default //应用渠道号 ] } lintOptions { abortOnError false warning InvalidPackage } sourceSets { main { jniLibs.srcDirs [libs] }
}
}
repositories { mavenCentral()
}dependencies { compile fileTree(dir: libs, include: [*.jar]) compile com.facebook.react:react-native:
}
到此为止我们已经完成了第一步操作接下来需要写 Native 和 JS 交互的代码可以参考我的这篇文章中 JS 调用 Native 以及 Native 调用 JS 部分这里不再赘述。假设我们已经完成了 Native 部分代码我们如何才能在 JS 中让他人能够通过 import 的方式调用我们的 JS 代码从而调用 Native 呢首先进入 my-react-library 文件夹然后在终端执行
npm init
生成 package.json 文件注意这里的 name 字段这里是别人引用你的模块的名字然后再创建一个 index.js 文件这是 node 模块的 JS 入口这里推荐使用 Sublime Text 进行 JS 的编写。这里以 jpush-react-native 为例 jpush-react-native/index.js 部分代码 import {NativeModules, Platform, DeviceEventEmitter} from react-native;// 通过 NativeModules 找到我们在 Native 定义的 JPushModule 类
const JPushModule NativeModules.JPushModule;export default class JPush {/*** Android only* 初始化JPush 必须先初始化才能执行其他操作*/static initPush() {JPushModule.initPush();}上面定义了一个 initPush 方法initPush 实际上调用了 JPushModule 中定义的 initPush 方法其他方法与此类似本质上都是通过 NativeModules 调用了 Native 提供的方法。 ## 发布 到此为止我们已经完成了 React Native 自定义模块。现在可以发布我们的自定义模块了。在 package.json 所在的目录下执行
npm publish
就可以把我们的自定义模块上传到 npm 库了。每次更新版本时需要改动 package.json 中的 version 值然后再执行 npm publish 即可。
使用
在 React Native 目录下执行
npm install my-react-library --save
安装完成后就会把这个模块保存到 node_modules 文件夹下由于我们的模块是一个 Android Library 项目所以在 Native 中还需要配置一下。主要是添加项目依赖 someones react-native project/some module/build.gradle dependencies { compile fileTree(dir: libs, include: [*.jar]) compile com.android.support:appcompat-v7:23.0.1 compile com.facebook.react:react-native: // From node_modules // 在 dependecies 中加入自定义模块 compile project(:my-react-library)
}
然后在 settings.gradle 中也要配置一下 someones react-native project/settings.gradle include :app, :my-react-library
project(:my-react-library).projectDir new File(rootProject.projectDir, ../node_modules/my-react-library/android)
在 MainActivity 中将自定义的 Package 添加进去 MainActivity.java ...
mReactInstanceManager ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName(index.android.bundle)
.setJSMainModuleName(react-native-android/index.android)
.addPackage(new MainReactPackage())
//添加自定义的 package
.addPackage(new MyReactPackage())
...
如果是 RN 0.29.0 以上版本则应在 MainApplication 中添加 MainApplication.java Overrideprotected ListReactPackage getPackages() {
return Arrays.ReactPackageasList( new MainReactPackage(), new MyReactPackage() );
}
到此为止我们完成了 Native 部分的配置完成后 sync 一下接下来就可以使用了。 别人要使用我们的模块时就可以这样写 someone.js //这里的 my-react-library是在 package.json 定义的 name
// 这样就可以
import MyModule from my-react-libraryexport default class SomeClass extends React.Component {componentDidMount() {// 调用 index.js 中定义的 doSomething()MyModule.doSomething();}作者KenChoi - 极光推送 原文如何在 React Native 中写一个自定义模块 知乎专栏极光日报
