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奥。老铁没毛病吧。