android嵌入react native

android嵌入react native

本来不想写这篇文章的，因为网上关于android嵌入react-native的文章实在是太多了，但是大部分文章写得都坑爹，还有大部分抄的很坑爹，照着来会发现有问题啊，反正就是坑爹。所以我打算写一篇采用最新版本react-native，能用的教程。

##1.去react native官网看教程安装环境不解释
##2.实现AwesomeProject采用react创建的项目

如果你创建的这个项目能正常运行，说明你的环境搭建的没问题，那就可以看接下的文章了，如果不行，请先自行解决掉，再来看接下来的文章。
##3采用androidstudio创建项目，然后将react native集成进去
-1.采用androidstudio创建一个原生的android项目，在项目跟目录下创建一个叫package.json的东西
里面内容如下

{
  "name": "MyReactNativeApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "16.2.0",
    "react-native": "0.53.3"
  }
}

接下来我们使用npm（node包管理器，Node package manager）来安装React和React Native模块。 请打开一个终端/命令提示行，进入到项目目录中（即包含有package.json文件的目录），然后运行下列命令来安装：
$ npm install
配置maven
在你的app中 build.gradle 文件中添加 React Native 依赖:

 dependencies {
     compile "com.facebook.react:react-native:0.53.3" 
 }

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

allprojects {
   repositories {
       maven {
          mavenLocal()
           jcenter()
           maven {
               // All of React Native (JS, Android binaries) is installed from npm
               url "$rootDir/node_modules/react-native/android"
           }
       }
   }
}

注意这里的路径跟官网不一样，是因为我么你的package.json所在的位置跟官网的项目不一样。如果路径不对是绝逼会出现“Failed to resolve: com.facebook.react:react-native:0.x.x" 异常。
另外如果出了问题还要在app的build.gradle添加

configurations.all {
  resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'
}

如果报.so找不到就接着添加

android {
  compileSdkVersion 23
  buildToolsVersion "23.0.1"
  defaultConfig {
      applicationId "com.hf.rndemo"
      minSdkVersion 19
      targetSdkVersion 23
      versionCode 1
      versionName "1.0"
      testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
      ndk {
          abiFilters "armeabi-v7a", "x86"
      }
  }
  packagingOptions {
      exclude "lib/arm64-v8a/librealm-jni.so"
  }
  buildTypes {
      release {
          minifyEnabled false
          proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
      }
  }
}

如果你是华为手机在跑，那么你的问题还没有结束，还会遇到坑爹的事，直接给出解决办法

1. eact-native 运行初始化项目报错 在\android\app\src\main目录下创建一个空的assets文件夹在项目根目录下运行
   react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
   注意是index.js，不是index.android.js。

2. adb运行命令连接手机将电脑的端口映射出去 adb -s PBV0217215003054 reverse tcp:8081 tcp:8081

如果是同一个网段可以配置本机IP：8081和端口号然后Reload。
如果这行命令报错Unable to resolve module interopRequireDefault
请执行yarn add @babel/runtime
然后就可以正常运行了。
RN的坑真的太多，特别是版本太多了，js依赖库的版本也太多了，开发体验并不好。。。
按照我的方式百分百可以正常运行，错了欢迎来打脸。