• 【转】在Windows下搭建React Native Android开发环境


    http://www.jianshu.com/p/2fdc4655ddf8

     

    安装JDK

    Java官网下载JDK并安装。请注意选择x86还是x64版本。

    推荐将JDK的bin目录加入系统PATH环境变量。

    安装Android SDK

    可以单独安装Android SDK,也可以通过Eclipse ADT或者Android Studio一并安装。推荐使用Android Studio,以下说明会默认以Android Studio的方式说明。请注意选择x86还是x64版本。

    为了加速下载,推荐从AndroidDevTools下载。

    然后进入SDKManager(可通过Android Studio菜单Tools-Android-SDK Manager),确保以下项目已经安装并更新到最新:

    • Tools/Android SDK Tools (24.3.3)

    • Tools/Android SDK Platform-tools (22)

    • Tools/Android SDK Build-tools (23.0.1)

    • Android 6.0 (API 23)/SDK Platform (1)

    • Extras/Android Support Library(23.0.1)

    推荐使用腾讯Bugly的镜像加速下载。查看说明

    推荐将SDK的platform-tools子目录加入系统PATH环境变量。

    安装Git

    下载Git,记得把git.exe的路径写入系统环境变量,因为在执行react-native init命名时会调用git去下载react-native的源码。

    安装Python并配置环境变量

    https://www.python.org/downloads/release/python-2711/

    要配置环境变量,否则报错

    安装C++环境

    推荐从itellyou下载并安装Visual Studio 2013或2015。也可选择Windows SDK、cygwin或mingw等其他C++环境。编译node.js的C++模块时需要用到。

    安装node.js

    官网下载node.js的官方4.1版本或更高版本。npm(node package manager)是随着node.js就安装好的,为了加速安装其他的package,在cmd里输入以下命令:

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

     

    安装react-native命令行工具

    npm install -g react-native-cli

    创建react-native android项目

    react-native init MyProject

    这一步要等上很长时间,原因不明。不想等待的话可以在这里下载项目文件,然后将android目录下的gradle.properties文件中的sdk.dir设为本机上sdk的目录。

    sdk.dir=F:\android\sdk

    启动react-native服务

    进入项目文件夹,输入启动命令

    react-native start

    在浏览器中访问地址:http://localhost:8081/index.android.bundle?platform=android
    第一次访问需要骚等一会,这是在生成android的bundle文件。cmd窗口别关,一直保持开启状态。

    在模拟器中运行

    进入项目目录,输入命令:

    react-native run-android

    第一次运行时会需要下载一些东西,等待就行。
    build成功后便会在模拟器上自动运行了

     

    D:WorkspaceReactNativeAndroid>react-native init MyProject
    This will walk you through creating a new React Native project in D:WorkspaceR
    eactNativeAndroidMyProject
    Installing react-native package from npm...
    
    > utf-8-validate@1.2.1 install D:WorkspaceReactNativeAndroidMyProject
    ode_m
    odules
    eact-native
    ode_modulesws
    ode_modulesutf-8-validate
    > node-gyp rebuild
    
    
    D:WorkspaceReactNativeAndroidMyProject
    ode_modules
    eact-native
    ode_module
    sws
    ode_modulesutf-8-validate>if not defined npm_config_node_gyp (node "D:Pr
    ogramFiles
    odejs
    ode_modules
    pmin
    ode-gyp-bin\....
    ode_modules
    ode-gyp
    in
    ode-gyp.js" rebuild )  else (node  rebuild )
    
    > bufferutil@1.2.1 install D:WorkspaceReactNativeAndroidMyProject
    ode_modul
    es
    eact-native
    ode_modulesws
    ode_modulesufferutil
    > node-gyp rebuild
    
    
    D:WorkspaceReactNativeAndroidMyProject
    ode_modules
    eact-native
    ode_module
    sws
    ode_modulesufferutil>if not defined npm_config_node_gyp (node "D:Progra
    mFiles
    odejs
    ode_modules
    pmin
    ode-gyp-bin\....
    ode_modules
    ode-gypin
    
    ode-gyp.js" rebuild )  else (node  rebuild )
    
    gyp ERR! configure error
    gyp ERR! stack Error: Can't find Python executable "python", you can set the PYT
    HON env variable.
    gyp ERR! stack     at failNoPython (D:ProgramFiles
    odejs
    ode_modules
    pm
    ode
    _modules
    ode-gyplibconfigure.js:116:14)
    gyp ERR! stack     at D:ProgramFiles
    odejs
    ode_modules
    pm
    ode_modules
    ode-
    gyplibconfigure.js:71:11
    gyp ERR! stack     at FSReqWrap.oncomplete (fs.js:82:15)
    gyp ERR! System Windows_NT 6.1.7600
    gyp ERR! command "D:\ProgramFiles\nodejs\node.exe" "D:\ProgramFiles\nodejs
    
    ode_modules\npm\node_modules\node-gyp\bin\node-gyp.js" "rebuild"
    gyp ERR! cwd D:WorkspaceReactNativeAndroidMyProject
    ode_modules
    eact-nativ
    e
    ode_modulesws
    ode_modulesutf-8-validate
    gyp ERR! node -v v4.2.6
    gyp ERR! node-gyp -v v3.0.3
    gyp ERR! not ok
    gyp ERR! configure error
    gyp ERR! stack Error: Can't find Python executable "python", you can set the PYT
    HON env variable.
    gyp ERR! stack     at failNoPython (D:ProgramFiles
    odejs
    ode_modules
    pm
    ode
    _modules
    ode-gyplibconfigure.js:116:14)
    gyp ERR! stack     at D:ProgramFiles
    odejs
    ode_modules
    pm
    ode_modules
    ode-
    gyplibconfigure.js:71:11
    gyp ERR! stack     at FSReqWrap.oncomplete (fs.js:82:15)
    gyp ERR! System Windows_NT 6.1.7600
    gyp ERR! command "D:\ProgramFiles\nodejs\node.exe" "D:\ProgramFiles\nodejs
    
    ode_modules\npm\node_modules\node-gyp\bin\node-gyp.js" "rebuild"
    gyp ERR! cwd D:WorkspaceReactNativeAndroidMyProject
    ode_modules
    eact-nativ
    e
    ode_modulesws
    ode_modulesufferutil
    gyp ERR! node -v v4.2.6
    gyp ERR! node-gyp -v v3.0.3
    gyp ERR! not ok
    npm WARN optional dep failed, continuing utf-8-validate@1.2.1
    npm WARN optional dep failed, continuing bufferutil@1.2.1
    
    `npm install --save react-native` failed
    
    D:WorkspaceReactNativeAndroid>

    如果是连真机的话,很大可能看到的结果是一片白啊一片白。经查,发现是安全中心中的“悬浮窗”权限并没有对我们的这个新app开放,那么将权限开放,重启app,啊呀,一片红啊一片红。。。长按物理菜单键或者死命摇一摇手机,会弹出一个小窗口,选择“Dev Settings”,然后选择“Debug server host for device”,会弹出一个输入框,输入电脑ip地址和默认的8081端口,再次重新app,啊呀,粗线了粗线了。。。

    但是由于npm上的版本在windows下存在BUG,因此需要安装github上的master支线,否则会在下一步骤报以下错误:

    This will walk you through creating a new React Native project in *** events.js:141       throw er; // Unhandled 'error' event       ^ Error: spawn npm ENOENT     at exports._errnoException (util.js:837:11)     at Process.ChildProcess._handle.onexit (internal/child_process.js:178:32)     at onErrorNT (internal/child_process.js:344:16)     at doNTCallback2 (node.js:429:9)     at process._tickCallback (node.js:343:17)     at Function.Module.runMain (module.js:477:11)     at startup (node.js:117:18)     at node.js:951:3

    如果您看到本文时0.12已经发布,那很可能直接输入上面的命令就行了。如果0.12还没有发布,请进行以下步骤:

    React Native的Github页面右侧点击Download ZIP,下载后解压,并执行以下代码:

    cd **解压的目录** cd react-native-cli npm install -g

    创建项目

    进入你的工作目录,运行

    react-native init MyProject

    并耐心等待数分钟。

    运行packager

    首先要修复package在windows下的两处BUG。

    1、参考这个commit,在node_modules/react-native/packager/react-packager/src/DependencyResolver/Module.js的getName()方法中,将

    return path.join(name, path.relative(p.root, this.path));

    修改为

    return path.join(name, path.relative(p.root, this.path)).replace(/\/g, '/');

    注意,如果你在修改此行代码之前运行过packager,那你可能需要去C:Users你的用户名AppDataLocalTemp中找到并删除所有 react-packager-cache 开头的文件。

    2、参考这个commit,在node_modules/react-native/packager/react-packager/src/DependencyResolver/DependencyGraph/ResolutionRequest.js的_resolveNodeDependency(fromModule, toModuleName)方法中,将

    for (let currDir = path.dirname(fromModule.path);                 currDir !== '/';                 currDir = path.dirname(currDir)) {

    修改为

    for (let currDir = path.dirname(fromModule.path);                 path.dirname(currDir) != currDir;                 currDir = path.dirname(currDir)) {

    随后可以运行packager。

    如果你有cygwin,可以在cygwin环境中进入工程目录,运行

    npm start

    如果没有cygwin或不在cygwin环境中,可以进入工程目录,运行

    node node_modules
    eact-nativepackagerpackager.js

    可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的脚本。第一次访问通常需要十几秒,并且在packager的命令行可以看到进度条。如果迟迟看不到进度条,请检查上面的修改是否已经做到。

    运行模拟器

    推荐使用BlueStacks不过要小心它推送的广告和垃圾应用。

    如果有真机,可以不必运行模拟器,要配置好驱动,使得adb devices可以看到对应的设备。

    安卓运行

    保持packager开启,另外打开一个命令行窗口,然后在工程目录下运行

    react-native run-android

    首次运行需要等待数分钟并从网上下载gradle依赖。

    运行完毕后可以在模拟器或真机上看到应用自动启动了。

    如果gradle依赖下载出现报错,请多试几次,或者设置VPN加速。

    如果apk安装运行出现报错,请检查platform-tools是否已经设到了PATH环境变量中,运行adb devices能否看到设备。

    至此,应该能看到APP运行,并报错 Unable to download JS bundle

    摇晃设备或按Menu键(Bluestacks模拟器按键盘上的菜单键,通常在右Ctrl的左边 或者左Windows键旁边),可以打开调试菜单,点击Dev Settings,选Debug server host for device,输入你的局域网IP,再按back键返回,再按Menu键,在调试菜单中选择Reload JS,就应该可以看到运行的结果了。

    安卓调试

    目前Windows下无法自动打开chrome进行调试,所以手动打开chrome,访问如下地址:http://localhost:8081/debugger-ui 即可。

    =====================================================================

    已按该教程搭建完成。以下是截图

  • 相关阅读:
    作用域 + this指向 的一道没面试题
    找出数组中最大的值
    统计数组中每个值出现的次数, 统计对象中每个字符出现的次数
    uniapp在h5 和 APP 端兼容性 bug 解决方案
    数组去重的常用方法,利用Promise实现函数按序执行
    momentjs实现距离当前时长并且回现中文效果
    SQL server 上机练习题
    JS 9
    JS 8
    JS 7
  • 原文地址:https://www.cnblogs.com/exmyth/p/5185020.html
Copyright © 2020-2023  润新知