ReactNative混合开发Android环境搭建

搭建Android开发环境

1. 下载JDK ， Mac版jdk8百度网盘链接: 密码:rvfp
2. mac版jdk安装后不用配置环境变量，window需要配置

搭建ReactNative开发环境

1.安装HomeBrew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
2.使用[Homebrew](http://brew.sh/)来安装 Node 和 Watchman
brew install node
命令安装有可能会某个文件下载失败出错，建议到官网下载安装包安装，不会出错：[https://nodejs.org/en/](https://nodejs.org/en/)
3.设置npm 国内镜像
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
4.安装文件观察服务
brew install watchman
5.安装yarn 代替 npm
npm install -g yarn react-native-cli
6.设置yarn 国内镜像
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

简单使用ReactNative

1.创建项目：
react-native init AwesomeProject
2.编译并运行
cd AwesomeProject
react-native run-android

以上参考：ReactNative开发环境准备中文说明

混合开发实战

• 先创建一个Android App项目，保证运行正常
• RN配置
  1. 新建一个目录，例如mixapp，将Android项目移动到这个目录下
  2. 进入 mixapp目录，添加package.json文件，内容如下：

{
  "name": "MyReactNativeApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "yarn react-native start"
  }
}

3. 命令行执行 yarn add react-native && yarn add [email protected] 来安装依赖
   根据这个warnning来安装react版本

warning " > [email protected]" has unmet peer dependency "[email protected]"

4. 在app module 的build.gradle 文件中添加reactnative依赖

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

5. 在project的build.gradle 文件中配置maven 源

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

6. 编写好RN代码后，启动Packager服务，本例中RN内容详见底部Demo

yarn start

7. 和正常运行Android项目一样运行app

以上参考：ReactNative集成到现有应用中

Github Demo地址