00 ReactNative开发环境搭建（Windows+And

2018-03-10 本文已影响79人与之书

0*00

很久以前折腾过一次ReactNative环境，但之后工作中也没有需要，便没有深入研究，经过一年多，混合开发愈发热门，近日在图书馆拿到一本《React Native跨平台移动应用开发》（第2版），看了下还蛮有趣的，虽然因为Facebook之前私跑条约，导致Apache、WordPress不再支持ReactNative，国内百度不再使用，阿里大力发展自己的Weex，详见如何看待百度要求内部全面停止使用 React / React Native?.这个事件对于RN的发展不是什么好事，不过小公司反正也不用太担心，基本上没可能和Facebook发生什么牵扯，即便实际用不到RN，学习下机制、原理也是不错的。

0*01

后续会尽量做一个连续的文章，记录学习RN的过程。
主要参考内容：

《React Native跨平台移动应用开发》（第2版）作者：阙禧韬
图书豆瓣链接：React Native跨平台移动应用开发
作者GitHub：esr6n
ReactNative中文官网：ReactNative 中文网

0*02 基础概念

React、ReactNative、React.js是不同的概念，Facebook后来将React框架的开源许可改成了MIT，但ReactNative还是BSD+PATENTS，所以对于大公司来说，用React框架问题不大，用ReactNative就有专利的风险。（关于开源协议参见https://github.com/phodal/licenses）
React是基础框架，是设计理念
React.js 是在React框架基础上用来开发网页的。
ReactNative是用来开发移动应用的

0*03 环境配置（windows10+android）

随着RN的更新，早期的一些配置方式已经不合适，甚至现在正在看的这本也已经不适合现在的配置方式，结合RN中文网的内容再重新记录一下。
准备工作

Chocolatey 这个其实不需要，单独下载node.js和python2.X就可以
RN目前不支持python3.X
准备好JDK1.8 和 Android SDK（安装Android Studio下载即可目前AS的稳定版是3.0.1）
安装好node.js就可以在命令行使用npm了，如果担心速度不好，可以设置npm镜像，通过淘宝镜像下载(个人未设置)。

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

安装yarn和ReactNativeCLI （-g表示global）

npm install -g yarn react-native-cli

安装完yarn之后就可以用yarn代替npm了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install --save 某第三方库名。(RN中文网的说法)
通常这一步不会有太大的问题，主要是下载更新。如果有问题，现将文件都更新到最新（python、JDK基本不需要更新，主要是node.js要更新到最新，AS有稳定版也更新为稳定版）
设定好JAVA_HOME（例：D:\Program Files\Java\jdk1.8.0_131）和ANDROID_HOME（例：D:\ProgramData\Android\android-sdk）

初始化项目 (名称任意)
在想要创建项目的文件夹下打开命令行，输入以下命令。（文件夹路径不要有中文）

react-native init LearnRNDemo

这个过程会比较久，需要下载50-60M的文件，综合网络等因素，可能需要1min以上。
这一步如果失败，查看下是否有具体的错误，有的话针对性处理。如果没有或者就是uncaught exception，建议优先更新node.js，再重新初始化。
如果还不行，书中有两个建议，删除安装盘/users/用户名/.node-gyp 和安装盘/users/用户名/AppData/Roaming/npm-cache (AppData是隐藏文件夹)。删除后重新初始化
如果还有问题，就需要自己针对性分析了

初始化后应该是这样的：

RN初始化完成.JPG

运行项目

init完成后的图片其实说明得挺清楚的，cd到刚创建的项目目录，运行“react-native run-ios”或者“react-native run-android”，但是不建议这么做，因为自动生成的Gradle版本太低了,下载起来太费劲。。。
建议操作（只说windows下的android）

用AS打开生成的android项目
配置整个项目的build.gradle、模块的build.gradle和gradle-wrapper.properties

配置compileSdkVersion 和 buildToolsVersion 尽量是最新的或者比较新的
配置模块gradle文件中的插件版本（classpath 'com.android.tools.build:gradle:3.0.1'）
注意，AS3.0.1中远程仓库要添加google()
properties中配置路径（distributionUrl=https://services.gradle.org/distributions/gradle-4.1-all.zip）
注意插件版本3.0以上要和gradle-4.0以上对应
gradle可以单独下载再用本地地址导入，参见https://gradle.org/releases/，然后将distributionUrl=file:///D:/Gradle/gradle-4.1-all.zip

===================工程的gradle==============
apply plugin: "com.android.application"
import com.android.build.OutputFile
project.ext.react = [
    entryFile: "index.js"
]

apply from: "../../node_modules/react-native/react.gradle"
def enableSeparateBuildPerCPUArchitecture = false
def enableProguardInReleaseBuilds = false

android {
    compileSdkVersion 25
    buildToolsVersion "27.0.3"

    defaultConfig {
        applicationId "com.learnrn"
        minSdkVersion 19
        targetSdkVersion 25
        versionCode 1
        versionName "1.0"
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }
    splits {
        abi {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
            include "armeabi-v7a", "x86"
        }
    }
    buildTypes {
        release {
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }
    // applicationVariants are e.g. debug, release
    applicationVariants.all { variant ->
        variant.outputs.each { output ->
            def versionCodes = ["armeabi-v7a":1, "x86":2]
            def abi = output.getFilter(OutputFile.ABI)
            if (abi != null) {  // null for the universal-debug, universal-release variants
                output.versionCodeOverride =
                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
            }
        }
    }
}

dependencies {
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:25.4.0"
    compile "com.facebook.react:react-native:+"  // From node_modules
}

task copyDownloadableDepsToLibs(type: Copy) {
    from configurations.compile
    into 'libs'
}

===================模块的gradle===============
buildscript {
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.0.1'
    }
}

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

===================properties============
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-4.1-all.zip

sync一下项目，确保编译能够成功。
按道理直接用AS run应该可以，但是事实是不行，报找不到asset什么的。
在命令行运行 “react-native run-android” 也会报错，需要先把“..\LearnRN\android\app\build”中的内容全部删掉，再运行。
此时会下载比较多的东西，中间可能会因为下载导致失败，重新运行即可。
如果上面没有把gradle配置设置成最新，用默认的2.14运行，在MX4上会报错

Installing APK 'app-debug.apk`' on 'MX4 - 5.1' for app:debug
Unable to install 项目路径\android\app\build\outputs\apk\app-debug.apkcom.android.ddmlib.InstallException: Failed to install all'

正常此时就可以运行了，目前显示的内容是

Welcome to React Native!
To getstarted edit App.js
Double tap R on your keyboard to reload
Shake or press menu button for dev menu

解释得挺清楚的，可以通过编辑App.js来实现自己的需求
通过双击R、摇一摇等方式来显示开发清单。
和以前版本不同的是，没有区分index.android.js和index.ios.js，直接就是一个App.js

打开App.js，可以尝试修改下文字保存后，摇一摇手机，选择Reload，即可重新加载，无需重新编译。

如果加载中文出现乱码，请确认文档保存时选择了utf-8 +bom编码。
效果如图

rn.jpg

00 ReactNative开发环境搭建（Windows+And

0*00

0*01

0*02 基础概念

0*03 环境配置（windows10+android）

猜你喜欢

热点阅读