React Native 不支持在 Windows 上开发(还)?

Posted

技术标签:

【中文标题】React Native 不支持在 Windows 上开发(还)?【英文标题】:React Native does not support development on Windows (yet)? 【发布时间】:2015-12-13 16:53:42 【问题描述】:

我相信很多人都对 React Native 现在终于支持 android 感到非常兴奋。

但是它不支持在 Windows 机器上开发会让人非常失望 - 在许多情况下,这会阻止 React Native 在不能仅仅改变其主要操作系统的大公司中采用。

我挖了一点,无论如何让它在 Windows 上运行似乎并不难。

react-native-cli index.js 中从 spawn 更改为 requirejs.exec,如下所示:

    spawn.exec(cmd + ' ' + args.join(' '), function(code, output)
      if (code !== 0) 
        cb(new Error('Command exited with a non-zero status ' + code + '\n' + cmd + ' ' + args.replace(',', ' ')));
       else 
        cb(null);
      
    );
    //var proc = spawn(cmd, args, stdio: 'inherit');
    //proc.on('close', function(code) 
    //  if (code !== 0) 
    //    cb(new Error('Command exited with a non-zero status'));
    //   else 
    //    cb(null);
    //  
    //);

此更改使我能够运行react-native run-android 而没有任何可见的错误。它启动模拟器和应用程序。

让它在 Windows 上运行的最后一个缺失的部分是: 为什么开发服务器不工作 - 或者为什么应用无法连接到它?

我收到“无法下载 JS Bundle...”红屏死机。 react-native run-android 似乎无法启动它,即使它打印了 Starting JS server...。查看底部的完整输出。

有谁能帮忙解决这个问题吗?

谢谢

    Y:\Mobile>react-native run-android
    Starting JS server...
        Building and installing the app on the device (cd android && gradlew.bat installDebug)...
    :app:preBuild UP-TO-DATE
    :app:preDebugBuild UP-TO-DATE
    :app:checkDebugManifest
        :app:preReleaseBuild UP-TO-DATE
    :app:prepareComAndroidSupportAppcompatV72300Library UP-TO-DATE
    :app:prepareComAndroidSupportSupportV42300Library UP-TO-DATE
    :app:prepareComFacebookFrescoDrawee061Library UP-TO-DATE
    :app:prepareComFacebookFrescoFbcore061Library UP-TO-DATE
    :app:prepareComFacebookFrescoFresco061Library UP-TO-DATE
    :app:prepareComFacebookFrescoImagepipeline061Library UP-TO-DATE
    :app:prepareComFacebookFrescoImagepipelineOkhttp061Library UP-TO-DATE
    :app:prepareComFacebookReactReactNative0110Library UP-TO-DATE
    :app:prepareOrgWebkitAndroidJscR174650Library UP-TO-DATE
    :app:prepareDebugDependencies
        :app:compileDebugAidl UP-TO-DATE
    :app:compileDebugRenderscript UP-TO-DATE
    :app:generateDebugBuildConfig UP-TO-DATE
    :app:generateDebugAssets UP-TO-DATE
    :app:mergeDebugAssets UP-TO-DATE
    :app:generateDebugResValues UP-TO-DATE
    :app:generateDebugResources UP-TO-DATE
    :app:mergeDebugResources UP-TO-DATE
    :app:processDebugManifest UP-TO-DATE
    :app:processDebugResources UP-TO-DATE
    :app:generateDebugSources UP-TO-DATE
    :app:processDebugJavaRes UP-TO-DATE
    :app:compileDebugJavaWithJavac UP-TO-DATE
    :app:compileDebugNdk UP-TO-DATE
    :app:compileDebugSources UP-TO-DATE
    :app:preDexDebug UP-TO-DATE
    :app:dexDebug UP-TO-DATE
    :app:validateDebugSigning
        :app:packageDebug UP-TO-DATE
    :app:zipalignDebug UP-TO-DATE
    :app:assembleDebug UP-TO-DATE
    :app:installDebug
    Installing APK 'app-debug.apk' on 'reactnative(AVD) - 6.0'
    Installed on 1 device.

        BUILD SUCCESSFUL

    Total time: 20.332 secs
    Starting the app (adb shell am start -n com.mobile/.MainActivity)...
    Starting: Intent  cmp=com.mobile/.MainActivity 

更新

以下是我在 react-native run-android 工作后尝试让开发服务器运行的更多细节:

我试过了 - 但 `npm start' 失败了:

    Y:\Mobile>npm start

    > Mobile@0.0.1 start Y:\Mobile
    > node_modules/react-native/packager/packager.sh

    'node_modules' is not recognized as an internal or external command,
    operable program or batch file.

    npm ERR! Windows_NT 6.3.9600
    npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
    npm ERR! node v4.0.0
    npm ERR! npm  v2.14.2
    npm ERR! code ELIFECYCLE
    npm ERR! Mobile@0.0.1 start: `node_modules/react-native/packager/packager.sh`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the Mobile@0.0.1 start script 'node_modules/react-native/packager/packager.sh'.
    npm ERR! This is most likely a problem with the Mobile package,
    npm ERR! not with npm itself.
    npm ERR! Tell the author that this fails on your system:
    npm ERR!     node_modules/react-native/packager/packager.sh
    npm ERR! You can get their info via:
    npm ERR!     npm owner ls Mobile
    npm ERR! There is likely additional logging output above.

    npm ERR! Please include the following file with any support request:
    npm ERR!     Y:\Mobile\npm-debug.log

然后我尝试了react-native start,但失败如下:

    Y:\Mobile>react-native start
    module.js:338
        throw err;
        ^

    Error: Cannot find module 'Y:\Mobile\packager.js'
        at Function.Module._resolveFilename (module.js:336:15)
        at Function.Module._load (module.js:286:25)
        at Function.Module.runMain (module.js:475:10)
        at startup (node.js:117:18)
        at node.js:951:3

然后我尝试了node node_modules/react-native/packager/packager.js,它实际上是这样工作的:

    Y:\Mobile>node node_modules/react-native/packager/packager.js
     ┌────────────────────────────────────────────────────────────────────────────┐
     │  Running packager on port 8081.                                            │
     │                                                                            │
     │  Keep this packager running while developing on any JS projects. Feel      │
     │  free to close this tab and run your own packager instance if you          │
     │  prefer.                                                                   │
     │                                                                            │
     │  https://github.com/facebook/react-native                                  │
     │                                                                            │
     └────────────────────────────────────────────────────────────────────────────┘
    Looking for JS files in
       Y:\Mobile


    React packager ready.

    [10:43:07 AM] <START> Building Dependency Graph
    [10:43:07 AM] <START> Crawling File System
    [10:43:17 AM] <END>   Crawling File System (10513ms)
    [10:43:17 AM] <START> Building in-memory fs for javascript
    [10:43:18 AM] <END>   Building in-memory fs for JavaScript (1116ms)
    [10:43:18 AM] <START> Building in-memory fs for Assets
    [10:43:19 AM] <END>   Building in-memory fs for Assets (1090ms)
    [10:43:19 AM] <START> Building Haste Map
    [10:43:20 AM] <START> Building (deprecated) Asset Map
    [10:43:20 AM] <END>   Building (deprecated) Asset Map (221ms)
    [10:43:20 AM] <END>   Building Haste Map (639ms)
    [10:43:20 AM] <END>   Building Dependency Graph (13360ms)

然后我在红色死屏中按Reload JS,大约 30 秒后它再次失败,开发服务器控制台打印出来,然后退出开发服务器:

    <--- Last few GCs --->

      172210 ms: Scavenge 1402.5 (1455.6) -> 1402.5 (1455.6) MB, 9.6 / 0 ms (+ 2.0 ms in 1 steps since last GC) [allocation failure] [incremental marking delaying mark-sweep].
      173083 ms: Mark-sweep 1402.5 (1455.6) -> 1402.5 (1455.6) MB, 872.5 / 0 ms (+ 3.0 ms in 2 steps since start of marking, biggest step 2.0 ms) [last resort gc].
      173954 ms: Mark-sweep 1402.5 (1455.6) -> 1402.4 (1455.6) MB, 871.1 / 0 ms [last resort gc].


    <--- JS stacktrace --->

    ==== JS stack trace =========================================

    Security context: 0000018472E37349 <JS Object>
        1: join [path.js:~217] [pc=0000039512658044] (this=0000006899C67369 <an Object with map 0000008FE2423E19>)
        2: arguments adaptor frame: 3->0
        3: /* anonymous */(aka /* anonymous */) [Y:\Mobile\node_modules\react-native\packager\react-packager\src\DependencyResolver\DependencyGraph\ResolutionRequest.js:~226] [pc=00000395137E2AFA] (this=0000018472E04131 <undefined>,realModuleN...

    FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory

我认为我们已经很接近让它在 Windows 上运行了,我只需要一点帮助来完成最后的部分。

请帮忙

【问题讨论】:

复制自此 Github 问题:github.com/facebook/react-native/issues/2780 这里的答案 (***.com/questions/32572399/…) 也适用于 Windows 10(尚未在其他版本的操作系统上尝试过)。 【参考方案1】:

更新:由于社区的出色工作,从 0.14 版(2015 年 10 月)开始,Windows 开发成为可能 (details)。


Windows 尚未得到官方支持,请参阅Getting Started 上的文档。

我们希望尽早发布该版本,并首先关注 Mac OS。

社区中的人们让 React Native 可以在 Linux 上运行,只需进行一些微小的更改(我们将很快记录这些),并且看起来有人刚刚让它在 Windows 上运行:

https://github.com/facebook/react-native/issues/2787

【讨论】:

好的,多亏了一些了不起的人,我们现在在 Windows 上有了一个可以工作的 React-Native Android。正如您在 Git 问题中看到的那样,目前要使其工作有点手动过程,但我相信它很快就会合并到 master 中。非常感谢你,一旦它在主人那里,随时在这里提出另一个答案。 这是他们工作的要点:gist.github.com/mqli/e1e6576e9838d885a43a 如果有人想要比 react-native 文档提供的更多细节,我发了step by step guide 在 Windows 中设置 react native。【参考方案2】:

我找到了通过安装 cygwin 并运行来修复它的方法: cd package sh package.sh

我希望它对某人有所帮助。

【讨论】:

额外的sh ./gradlew :Examples:UIExplorer:android:app:installDebug可以这样使用。【参考方案3】:

ReactWindows 增加了对 Windows 10 SDK 的支持,它允许您构建应用程序:

Windows 10 Windows 10 移动版 Xbox One (UWP) Windows 7 和 8.1 (WPF)

【讨论】:

以上是关于React Native 不支持在 Windows 上开发(还)?的主要内容,如果未能解决你的问题,请参考以下文章

windows下webstorm调试react native

我如何在Widnows 10中运行React Native应用程序?

TouchId 不支持 Iphone 7 react-native

第一个React Native程序踩到的那些坑

React Native 入门

react-native-fbsdk 不支持redirect_uri URL