Android开发 React Native项目创建及环境搭建

先来看一下RNDemo效果吧，这里不得不吐槽一下，说实话RN毕竟属于js性能没有原生流畅看一下效果就知道了：

首先你需要安装NodeJS，因为React Native（简称RN，后面我就都用RN称呼了）本身就是使用Javascript语言和React语言为基础的，后面你会发现所有文件都是以.js为后缀名的，所以需要NodeJS来编译文件，而且后面会介绍到，我们还需要使用Node命令来初始化RN项目以及下载所有需要的node_modules包，好了废话不多说咱们开始吧。

如果安装完了NodeJS，你就可以使用npm命令了，否则找不到该命令，我先来介绍如何在Android Studio使用RN。

1、使用Android Studio创建一个空项目例如"RNDemo"，不过创建Android项目的时候需要注意的是：Minimum SDK当前最低兼容支持API16，所以创建的时候最好mini API16以上。

2、Android Demo项目创建完成之后，点击Terminal（注意需要在根目录下执行）

接下来执行下面代码：

npm init

npm install --save react react-native

注意：

init 主要根据提醒生成package.json文件

install --save react react-native 安装React 和React Native

然后在浏览器打开https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

将该文件下载下来放到根目录下：

3、添加及修改配置内容

1.修改package.json文件

2.创建入口js文件

3.添加build文件配置

build.gradle(Module:app)添加：

defaultConfig {
       ...
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }

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

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

build.gradle(Project:Application)添加：

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

4.manifest文件配置：

5.Activity继承ReactActivity，Application实现ReactApplication

把MyApplication添加到manifest的name中去。

一切已经准备就绪，开始run 'App'，然后在Terminal中输入命令react-native start，注意（如果是真机需要在这之前先执行adb reverse tcp:8081 tcp:8081保证8081端口与真机连接请不要占用端口号）

如果你需要打包App，那么首先你需要在android/app/src/main下新建assets目录，然后在Terminal命令行输入：

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/res/

然后你会发现在你创建的assets目录下会产生两个bundle文件就可以打包啦：

4、最后介绍RN如何编程

首先你需要了解一下react语言以及JavaScript语言基础，然后最好安装Webstorm，其他软件也能用但是，目前Webstorm是最流行以及最好用的，所有基本操作类似AndroidStudio开发工具用起来更顺手推荐Webstorm，而且Webstorm可以直接创建React Native项目项目自动创建了Android和IOS项目可直接使用哦：

源码

Android开发 React Native项目创建及环境搭建

猜你喜欢