ReactNative和Android共同开发基础流程

ReactNative和Android共同开发

  突然发现有身边人在问，如何用原生编辑器接入ReactNative环境进行混合开发。记得当时自己也不停地在网上扒资料，可是大多都是在讲如何进行ReactNative和Android之间相互调用，却忽略了如何搭建混合开发的环境。下面我将讲述自己接入ReactNative和Android混合开发的基础流程。

构建ReactNative的环境配置

  环境配置可以进行借鉴ReactNative中文网进行相应的平台安装相应的环境。
- ReactNative环境的配置地址

ReactNative中文网地址：http://reactnative.cn/docs/0.47/getting-started.html#content

Android搭建ReactNative开发环境：http://blog.csdn.net/gl_mine_csdn/article/details/59479885

构建AndroidStudio原生编译器环境

  原生编译器的环境配置，对大家来说一定是非常熟悉。但是大家不能忽略某些重要的配置。
- 原生编译环境的配置

ReactNative中文网地址：http://reactnative.cn/docs/0.47/getting-started.html#content

构建ReactNative和Android共同开发环境

  根据自己的学习认知，构建ReactNative和Android共同开发环境的方式有两种。
- 第一种方式
  如果是Android编译环境，那么需要创建一个Android原生项目，然后再原生项目的基础上进行搭建ReactNative环境。这种搭建方式适合已存在项目的情况下比较方便。（网上有很多构建流程）

eg: http://www.jianshu.com/p/22aa14664cf9?open_source=weibo_search
- 第二种方式
  今天主要说一下第二种方式，它是建立在初始化一个ReactNative项目的基础上进行原生混合开发。

1、首先我们要做的事情就是检查我们是否配置了ReactNative的开发环境。
2、其次我们需要打开终端（CMD）或者 Git Bash Here(安装Git工具)
3、执行 react-native init ReactNativeAndroid  命令用来初始化一个ReactNative项目
4、最终我们得到一个ReactNativeAndroid项目

   根据上述ReactNativeAndroid项目的目录结构我们就可以清楚地认识到，如何进行ReactNative和Android 共同开发。
   1、如果是Android，那么就需要用AndroidStudio开发工具去打开ReactNativeAndroid项目下的android文件工程（project），在这里进行原生开发。
   2、如果是IOS，那么就需要用Xcode开发工具去打开ReactNativeAndroid项目下的ios文件工程（project）,在这里进行原生开发
   3、如果进行ReactNative开发，那么在ReactNativeAndroid项目下找到对应环境下的js文件，在这里进行ReactNative开发。
   4、Android在index.android.js文件中进行开发，IOS在index.ios.js文件中进行开发

运行ReactNative和Android环境下的工程

• 执行AndroidStudio
• 执行XCode

因为我们在Android原生中编写了很多文件，所以只能通过AndroidStudio工具进行运行并且安装应用程序APK。

• 执行ReactNative 命令

同时我们也在ReactNative环境下编写了很多js文件，那么我们就需要下ReactNativeAndroid项目下去执行react-native run-android 命令去安装编写的js应用程序APK。

• 总结

最后我们就成功的进行了ReactNative和Android共同开发基础流程。如果有问题请多多指教。