React Native不支持在Windows上进行开发吗？

Question

I believe masses of people are very excited about React Native now finally supporting Android too.

BUT there will be a huge disappointment that it does not support developing on Windows machines - which in many cases will prevent the uptake of React Native in bigger companies which can't just change their main OS.

I digged a bit and it seems not to hard to get it running on Windows anyway.

Change from spawn to requirejs.exec in react-native-cli index.js like this:

    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);
    //  }
    //});

This change enables me to run react-native run-android without any visible errors. It starts the emulator and the app.

The only last missing piece to get it running on Windows is: Why does the development server not work - or why can't the app connect to it?

I get "Unable to download JS Bundle..." red screen of death. It seems that react-native run-android failed to start it, even though it prints Starting JS server... . See the complete output at the bottom.

Anybody out there who can help to fix that?

Thank you

    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 }

UPDATE

Here are some more details of what I tried to get the development server running after I got react-native run-android working:

I tried that - but `npm start' fails with:

    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

Then I tried react-native start which failed like this:

    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

Then I tried node node_modules/react-native/packager/packager.js which actually works somehow like this:

    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)

But then I press Reload JS in the red screen of death and after about 30seconds or so it fails again and the development server console prints that and then exits the development server:

    <--- 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

I think we are soooo close to get it running on Windows, I only need a bit of help with the last pieces here.

Please help

Answer 1

UPDATE: As of version 0.14 (Oct 2015) Windows development is possible ( details ) thanks to the awesome work of the community.

---

Windows is officially not supported yet, see the documentation on Getting Started .

We wanted to get the release out as early as possible and focused on Mac OS first.

People in the community got React Native to work on Linux with some minimal changes (we'll be documenting these soon) and looks like someone just got it working on Windows too:

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

Answer 2

I found a way to fix it by installing cygwin and running: cd package sh package.sh

I hope it helps someone.

Answer 3

ReactWindows adds support for the Windows 10 SDK, which allows you to build apps for:

• Windows 10
• Windows 10 Mobile
• Xbox One (UWP)
• Windows 7 and 8.1 (WPF)