React Native组件集成到Android原生项目

为了把 React Native 集成到 Android 原生项目中，踩了很多坑，因为作为web前端开发，本来就不熟悉安卓，参考了网上很多文章，但是都很旧了，而 React Native 已经升级到了 0.55 版本了，入口文件已经合成了一个 index.js，下面的内容也是基于这个版本实践的。

环境搭建

已经搭建好 React Native 环境的可以跳过，还没有的可以参考 React Native 中文网的 搭建教程，比较详细。

创建Android原生项目

安卓开发者自然很熟悉这个步骤，然而对于web前端开发者还是比较迷茫的。可以参考一下 使用Android Studio创建一个新的Android工程，创建一个 Empty Activity，接下来会比较好操作。

集成React Native

步骤一：安装相关依赖

在项目根目录下执行 npm init 命令，生成 package.json 文件，添加以下命令

"scripts": { 

    "start": "node node_modules/react-native/local-cli/cli.js start" 

} 

执行 npm i react react-native -S 安装 react 和 react-native

步骤二：配置maven

在你的 app/ 目录下的 build.gradle 文件中的 dependencies 里添加 React Native 依赖:

dependencies { 

    ... 

    compile "com.facebook.react:react-native:+" 

} 

在项目根目录下的 build.gradle 文件中为 React Native 添加一个 maven 依赖的入口，必须写在 “allprojects” 代码块中:

allprojects { 

    repositories { 

        ... 

        maven { 

            url "$rootDir/node_modules/react-native/android" 

        } 

    } 

} 

步骤三：代码集成，创建我们的 react-native 组件，在根目录下创建 index.js，（在 react-native 0.49.0版本以前，是 index.android.js 和 index.ios.js 作为入口文件，现在合成一个 index.js 文件了）

import React, {Component} from 'react'; 

import {AppRegistry,View,Text} from 'react-native'; 

class App extends Component{ 

    render(){ 

        return ( 

            <View> 

                <Text>哈哈哈</Text> 

            </View> 

        ) 

    } 

} 

AppRegistry.registerComponent('ReactNativeView', () => App); 

然后创建 MyReactActivity，Activity 是安卓中基本的页面单元，简单的说，可以看做 web 开发中的一个 html 页面。

在上面创建安卓项目的时候，已经创建了一个 MainActivity，在它的同级目录下，在 Android Studio右键新建一个 Activity，命名为 MyReactActivity，然后把内容改为如下：

package com.example.administrator.androidreactnative; 

import javax.annotation.Nullable; 

import com.facebook.react.ReactActivity; 

public class MyReactActivity extends ReactActivity { 

    @Nullable 

    @Override 

    protected String getMainComponentName() { 

        return "ReactNativeView"; 

    } 

} 

接着创建 MainApplication

package com.example.administrator.androidreactnative; 

import android.app.Application; 

import com.facebook.react.ReactApplication; 

import com.facebook.react.ReactNativeHost; 

import com.facebook.react.ReactPackage; 

import com.facebook.react.shell.MainReactPackage; 

import com.facebook.soloader.SoLoader; 

import java.util.Arrays; 

import java.util.List; 

public class MainApplication extends Application implements ReactApplication { 

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { 

        @Override 

        public boolean getUseDeveloperSupport() { 

            return BuildConfig.DEBUG; 

        } 

        @Override 

        protected List<ReactPackage> getPackages() { 

            return Arrays.<ReactPackage>asList( 

                new MainReactPackage() 

            ); 

        } 

    }; 

    @Override 

    public ReactNativeHost getReactNativeHost() { 

        return mReactNativeHost; 

    } 

    @Override 

    public void onCreate() { 

        super.onCreate(); 

        SoLoader.init(this,false); 

    } 

} 

最后在 app/src/main/AndroidManifest.xml 文件中，添加一些权限，以及声明MainApplication 跟 MyReactActivity

<?xml version="1.0" encoding="utf-8"?> 

<manifest xmlns:android="" 

    package="com.example.administrator.androidreactnative">