与现有的应用程序集成

---

本节将很快更新显示集成到更真实应用程序,如2048年的应用程序是用于objective - c和Swift。

关键概念

ReactNative是伟大的,当你从头开始一个新的手机应用程序。然而,它也适用于添加单一视图或用户对现有的native 应用程序。通过几个步骤,您可以添加新的ReactNative基础功能,屏幕、观点等。

React Native的关键组件集成到你的Android应用程序:

1. 了解 React Native组件集成。
2. react-native安装在Android应用程序根目录创建node_modules /目录。
3. 在JavaScript创建实际React Native组件。
4. 添加com.facebook.react:react-native:+ 和 maven指向react-native node_nodules /build.gradle文件。
5. 创建一个自定义React Native的Activity ,创建一个ReactRootView。
6. 启动React Native服务器和运行您的native 应用程序。
7. 选择性地添加更多的React Native的反应。
8. 调试。
9. 为部署做好准备。
10. 部署和利润!

先决条件

安卓入门指南将安装适当的先决条件(例如,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:

@Override
protected void onPause() {
    super.onPause();

    if (mReactInstanceManager != null) {
        mReactInstanceManager.onPause();
    }
}

@Override
protected void onResume() {
    super.onResume();

    if (mReactInstanceManager != null) {
        mReactInstanceManager.onResume(this, this);
    }
}

@Override
protected 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):

@Override
public 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