与现有的应用程序集成
来源:互联网 发布:京东全球购 知乎 编辑:程序博客网 时间:2024/05/22 04:29
本节将很快更新显示集成到更真实应用程序,如2048年的应用程序是用于objective - c和Swift。
关键概念
ReactNative是伟大的,当你从头开始一个新的手机应用程序。然而,它也适用于添加单一视图或用户对现有的native 应用程序。通过几个步骤,您可以添加新的ReactNative基础功能,屏幕、观点等。
React Native的关键组件集成到你的Android应用程序:
- 了解 React Native组件集成。
- react-native安装在Android应用程序根目录创建node_modules /目录。
- 在JavaScript创建实际React Native组件。
- 添加com.facebook.react:react-native:+ 和 maven指向react-native node_nodules /build.gradle文件。
- 创建一个自定义React Native的Activity ,创建一个ReactRootView。
- 启动React Native服务器和运行您的native 应用程序。
- 选择性地添加更多的React Native的反应。
- 调试。
- 为部署做好准备。
- 部署和利润!
先决条件
安卓入门指南将安装适当的先决条件(例如,npm) React Native Android目标平台上和你选择的开发环境。
JS添加到您的应用程序
在你的应用程序的根文件夹,运行:
$ npm init$ npm install --save react react-native$ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
这为你的应用创建一个节点模块并添加react-native npm依赖。现在打开新创建的包。json文件,添加这个脚本:
"start": "node node_modules/react-native/local-cli/cli.js start"
复制&粘贴以下代码到在根文件夹中index.android.js——这是一个贫乏的React Native app:
'use strict';import React from 'react';import { AppRegistry, StyleSheet, Text, View} from 'react-native';class HelloWorld extends React.Component { render() { return ( <View style={styles.container}> <Text style={styles.hello}>Hello, World</Text> </View> ) }}var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', }, hello: { fontSize: 20, textAlign: 'center', margin: 10, },});AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
准备你当前的应用程序
在你的应用程序的build.gradle文件添加React Native依赖:
dependencies { ... compile "com.facebook.react:react-native:+" // From node_modules.}
如果你想确保你总是使用特定的ReactNative版本在你的native构建,取代 + 一个实际的React Native版本 你从npm下载。
在你的项目的 build.gradle文件添加一个条目为当地React Native maven目录:
allprojects { repositories { ... maven { // All of React Native (JS, Android binaries) is installed from npm url "$rootDir/../node_modules/react-native/android" } } ...}
确保路径是正确的!你不应该遇到任何Gradle同步后出现错误“未能解决:com.facebook.react:react-native:0.x”。
接下来,是确保你有互联网权限在你androidmanifest . xml:
<uses-permission android:name="android.permission.INTERNET" />
这只是真正用于开发模式时重新加载JavaScript从开发服务器,所以你可以带这个版本构建如果你需要。
添加native 代码
你需要添加一些原生代码为了启动本机运行时,让它呈现一些反应。要做到这一点,我们将创建一个Activity,创建一个ReactRootView启动一个应用程序里和设置它的主视图。
如果你是针对Android版本< 5,从com.android.support:appcompat包使用AppCompatActivity类而不是Activity。
如果你发现你的应用程序崩溃以后,由于没有找到com.facebook.jni.IteratorHelper”,取消setUseOldBridge。在GitHub上看到相关问题。
public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler { private ReactRootView mReactRootView; private ReactInstanceManager mReactInstanceManager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); mReactRootView = new ReactRootView(this); mReactInstanceManager = ReactInstanceManager.builder() .setApplication(getApplication()) .setBundleAssetName("index.android.bundle") .setJSMainModuleName("index.android") .addPackage(new MainReactPackage()) .setUseDeveloperSupport(BuildConfig.DEBUG) .setInitialLifecycleState(LifecycleState.RESUMED) //.setUseOldBridge(true) // uncomment this line if your app crashes .build(); mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null); setContentView(mReactRootView); } @Override public void invokeDefaultOnBackPressed() { super.onBackPressed(); }}
如果您使用的是React Native 的starter kit,替换字符串“HelloWorld”用一个index.android.js文件(它的第一个参数AppRegistry.registerComponent()方法)。
如果您使用的是Android Studio,使用Alt + Enter添加所有失踪的引用到MyReactActivity类。小心使用你的包的BuildConfig从 …facebook… 而不是一个包。
我们需要设置的主题MyReactActivity Theme.AppCompat.Light.NoActionBar因为一些组件依赖于这个主题。
<activity android:name=".MyReactActivity" android:label="@string/app_name" android:theme="@style/Theme.AppCompat.Light.NoActionBar"></activity>
ReactInstanceManager可以在共享多个activities和/或fragments。你会想让自己的ReactFragment或ReactActivity、singleton持有ReactInstanceManager。当你需要ReactInstanceManager使用提供的一个单例。
接下来,我们需要通过一些activity生命周期回调到ReactInstanceManager:
@Overrideprotected void onPause() { super.onPause(); if (mReactInstanceManager != null) { mReactInstanceManager.onPause(); }}@Overrideprotected void onResume() { super.onResume(); if (mReactInstanceManager != null) { mReactInstanceManager.onResume(this, this); }}@Overrideprotected void onDestroy() { super.onDestroy(); if (mReactInstanceManager != null) { mReactInstanceManager.onDestroy(); }}
我们还需要传递后退按钮事件到React Native:
@Override public void onBackPressed() { if (mReactInstanceManager != null) { mReactInstanceManager.onBackPressed(); } else { super.onBackPressed(); }}
这允许JavaScript控制用户按下后退按钮的事件(如实现导航)。当JavaScript不处理返回事件,你invokeDefaultOnBackPressed方法将被调用。在默认情况下这只是杀死你的Activity。
最后,我们需要把dev菜单。默认情况下,震动手机只是激活,但这不是非常有用在模拟器。所以我们让它显示当你按硬件菜单按钮(使用Ctrl + M如果你使用Android Studio emulator):
@Overridepublic boolean onKeyUp(int keyCode, KeyEvent event) { if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) { mReactInstanceManager.showDevOptionsDialog(); return true; } return super.onKeyUp(keyCode, event);}
就是这样,你的activity是可以运行一些JavaScript代码。
运行您的应用程序
运行您的应用程序,您首先需要启动开发服务器。为此,只需在根文件夹中运行以下命令:
$ npm start
现在构建和运行正常你的Android应用。从命令行/ gradlew installDebug;在Android Studio像往常一样创建调试)。
如果您使用的是Android Studio 为您构建而不是Gradle直接包装,确保您安装watchman 在运行npm之前开始。它将防止包装机崩溃由于Android Studio的 packager 与 React Native packager 之间的冲突。
一旦你达到React-poweredactivity 内部的应用程序,它应该从开发服务器加载JavaScript代码,显示:
在Android Studio创建一个发布版本
你可以使用Android Studio来创建发布构建!它容易创建原生的Android应用程序。只有一个额外的步骤,这之前你必须做每个版本构建。您需要执行以下创建一个React Native bundle ,这将是包含在你的本地Android应用程序:
$ react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
别忘了将路径替换为正确的文件夹并创建assets 如果不存在!
在Android Studio 像往常一样,现在就创建一个发布构建你的native 应用!
关注公众号:
更多精彩文章等你来!!!
[1]:参考文献 http://facebook.github.io/react-native/docs/integration-with-existing-apps.html
- 与现有的应用程序集成
- 与现有的应用程序集成
- ReactNative与现有的iOS应用程序集成
- React Native与现有的应用程序集成
- python集成现有的数据库
- 更新现有的iOS应用程序
- 应用程序的集成与流程监控
- CKFinder(php版)的使用,以及与现有的CKEditor的集成
- CKFinder(php版)与现有的CKEditor的集成(问题补充)
- openfire集成现有系统的用户表
- react native 集成现有的Android项目
- 集成 Flex 与 Ajax 应用程序
- 集成 Flex 与 Ajax 应用程序
- PHP与已存在的Java应用程序集成
- 如何在Windows Server 2003中启用了Active Directory的情况下将 DNS 与现有 DNS 结构集成
- 如何才能将企业现有的组织关系集成到jbpm中?
- 在Windows上将ReactNative集成到现有的Android项目
- openfire + sqlserver ,以及现有系统的账户集成
- eclipse工程目录内文件显示为xml格式,更改成自己想要的格式
- 毛大庆:跑步治好了我的抑郁症
- 如何跟开发就测试范围进行沟通?
- Ios UIButton 设置圆角和边框
- 视频直播的弹幕
- 与现有的应用程序集成
- Android插件化开发
- 磁盘管理
- iOS本地推送
- 接近源生的android-async-http框架库使用基础
- [itweens插件] itween插件中文文档
- Python入门:文件内容去重操作
- JavaScript - This
- Apache cxf JaxWs基本应用