混合开发的大趋势之一React Native与Android联调
2016-11-15 17:59
656 查看
转载请注明出处:王亟亟的大牛之路
先安利,有空我都会更,看到的好东西都会放进来:https://github.com/ddwhan0123/Useful-Open-Source-Android公司某个app的rn模块已经上线了,虽然我没参与,但是从调研开始我都有大致了解,然后今天去学系列下,结合官方例子就写了这篇
基础配置部分
解说过程是从你Native加入rn模块,新建的rn项目配置的东西都有首先 在你的项目根目录同级开一个rn目录(这里只是举个例子)
mkdir xxx-rn && cd xxx-rn
像这样
xxx-rn就是刚才新建的文件夹
lib和project就是你原有的项目
然后下所需的包以及生成package.json文件
可能需要翻墙,或者跑tb的镜像
npm init 以及 npm install react react-native --save
再然后就把你的js代码丢到这里就行了,丢完之后启动服务
node node_modules/react-native/local-cli/cli.js start
就是起一个node.js的服务
然后在package.json文件里添加这段脚本
"scripts": { "start": "node node_modules/react-native/local-cli/cli.js start" },
以后就直接 npm start就能跑 不用打一长串路径,类似于 win的环境变量
通常 rn的编译会跑 外网maven但是其实现在新版本rn发布都是走的npm,所以这些依赖都在你的”本地maven”环境里,所以需要修改主项目的build.gradle
allprojects { repositories { mavenLocal() jcenter() maven { // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm url "$rootDir/../node_modules/react-native/android" } } }
一定要先mavenLocal()不然maven{}将没有效果,指向的地址其实也就是本地的”com.facebook.react.react-native”
这些都加完了ok,那再添加react-native 依赖
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 }
至此 基本的配置就都ok了,开始搞安卓代码(这部分官网抄的)
安卓代码部分
//需要继承ReactActivity public class MainActivity extends ReactActivity { //根视图 private ReactRootView reactRootView; //RN管理类 private ReactInstanceManager reactInstanceManager; /** * Returns the name of the main component registered from JavaScript. * This is used to schedule rendering of the component. */ @Override protected String getMainComponentName() { return "WjjPro"; } @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //初始化 reactRootView = new ReactRootView(this); //初始化,这部分可以看api文档,具体字段内容还是比较多的 reactInstanceManager = ReactInstanceManager.builder() //应用上下文 .setApplication(getApplication()) //js打包的名字 .setBundleAssetName("index.android.bundle") //js首页 .setJSMainModuleName("index.android") //基础的各种manager .addPackage(new MainReactPackage()) .setUseDeveloperSupport(BuildConfig.DEBUG) //初始化执行的时间 .setInitialLifecycleState(LifecycleState.BEFORE_RESUME) .build(); reactRootView.startReactApplication(reactInstanceManager, "WjjPro", null); //渲染 setContentView(reactRootView); } @Override public void invokeDefaultOnBackPressed() { super.onBackPressed(); } @Override protected void onPause() { super.onPause(); Log.d("--->","onPause"); if (reactInstanceManager != null) { reactInstanceManager.onHostPause(); } } @Override protected void onResume() { super.onResume(); Log.d("--->","onResume"); if (reactInstanceManager != null) { reactInstanceManager.onHostResume(this, this); } } @Override protected void onDestroy() { super.onDestroy(); Log.d("--->","onDestroy"); if (reactInstanceManager != null) { reactInstanceManager.onHostDestroy(); } } @Override public void onBackPressed() { Log.d("--->","onBackPressed"); if (reactInstanceManager != null) { reactInstanceManager.onBackPressed(); } else { super.onBackPressed(); } } // @Override // public boolean onKeyUp(int keyCode, KeyEvent event) { // if (keyCode == KeyEvent.KEYCODE_BACK && reactInstanceManager != null) { // reactInstanceManager.showDevOptionsDialog(); // return true; // } // return super.onKeyUp(keyCode, event); // } }
reactInstanceManager做了一个统筹管理,把我们Native的各种行为与rn的js页面做关联,分发以及管理
通过log明显2者的关联已经有效
例子源码地址:https://github.com/ddwhan0123/ReactNativeDemo
相关文章推荐
- 混合开发的大趋势之一React Native与Android联调
- 混合开发的大趋势之一React Native State (状态),Style(样式)
- 混合开发的大趋势之一React Native ScrollView (拉伸视图),ListView(列表视图)
- 混合开发的大趋势之一React Native之页面跳转(2)+物理返回+特定平台代码
- 混合开发的大趋势之一React Native之简单的登录界面
- 混合开发的大趋势之一React Native Height and Width (尺寸),Flexbox(位置关系)
- 混合开发的大趋势之一React Native之Image (脑动理解)
- 混合开发的大趋势之一React Native ScrollView (拉伸视图), ListView(列表视图)
- 混合开发的大趋势之一React Native之页面跳转(2)+物理返回+特定平台代码
- 混合开发的大趋势之一React Native TextInput (文本输入)
- 混合开发的大趋势之一React Native之Image (脑动理解)
- 混合开发的大趋势之一React Native Props (属性)
- 混合开发的大趋势之一React Native TextInput (文本输入)
- 混合开发的大趋势之一React Native ScrollView (拉伸视图),ListView(列表视图)
- 混合开发的大趋势之一React Native之页面跳转
- 混合开发的大趋势之一React Native Props (属性)
- 混合开发的大趋势之一React Native State (状态),Style(样式)
- 混合开发的大趋势之一React Native Height and Width (尺寸),Flexbox(位置关系)
- 混合开发的大趋势之一React Native之页面跳转
- 混合开发的大趋势之一React Native之简单的登录界面