React Native for Windows 0.61 起步


系统要求

  • Windows 10

    开发依赖

  • 安装 Visual Studio 2019

  • 安装 Visual Studio 2019 的这些选项

    • 工作负载 -> 通用 Windows 平台开发 -> 勾选可选项里的 “C++ (v141)通用 Windows 平台工具”
    • 工作负载 -> 使用 C++ 的桌面开发
    • 单个组件 -> 编译器、生成工具和运行时 -> MSVC v141 – VS 2017 C++ x64/x86 生成工具(v14.16)
    • 单个组件 -> 编译器、生成工具和运行时 -> MSVC v141 – VS 2017 C++ ARM64 生成工具(v14.16)
    • 单个组件 -> 开发活动 -> Node.js 开发工具
    • 预计安装所需空间大小:21.64GB

      安装 React Native 的开发依赖

  • 安装标准的 React Native 开发依赖,中文文档

  • 安装 node.js,确保node的版本是12.9.1或是更高,12.9.1是构建 React Native for Windows 推荐的版本

  • 安装 Chrome,用于调式JS,可选

  • 安装 Yarn,可选安装,如果你想为 react-native-windows 添砖加瓦则续安装

    故障排除

  • 如果在运行应用程序后,打包程序未更新或应用程序未显示 React Native 内容-请关闭打包程序命令提示符窗口,并确保该应用程序已打开,然后运行 yarn start 并再次从 Visual Studio 运行该应用程序。

  • 如果您在UWP应用程序窗口中看到带有错误消息:的红色错误框,请 ERROR: Instance failed to start. A connection with the server cannot be established 确保您正在使用打包 yarn start 程序运行,然后再次运行该应用程序。

    安装 React Native for Windows

  • 在需要创建项目的目录下面执行 react-native init

    npx react-native init <project name> --version ^0.61.5
    // npx 还能避免全局安装的模块,安装模块时会下载到一个临时目录,使用以后再删除
    // –version ^0.61.5 指定版本号

    安装 Windows 扩展

  • 安装 React Native for Windows 软件包

    cd <project name> 
    npx react-native-windows-init --overwrite
    // 切换到创建项目的目录下面然后安装

    运行 React Native Windows 应用

  • 运行前确保浏览器已经打开

  • 在 VS Code 中运行

    • 安装 VS Code 插件: React Native Tools
    • 在应用程根目录创建文件 .vscode/launch.json,并粘贴如下内容
      {
          "version": "0.2.0",
          "configurations": [
              {
                  "name": "Debug Windows",
                  "cwd": "${workspaceFolder}",
                  "type": "reactnative",
                  "request": "launch",
                  "platform": "windows"
              }
          ]
      }

      运行项目

      npx react-native run-windows
      // 第一次启动会有点慢,安装后会淡出一个命令提示符窗口,请按回车以继续
  • 按 “r” 键可以重载应用

在 Visual Studio 中运行

  • 在 Visual Studio 中打开解决方案文件(如:”\windowsAppDemo\windows\windowsAppDemo.sln”)
  • 如果 Visual Studio 显示无法加载,可以关闭 Visual Studio 然后重新打开
  • 在项目目录项目下打开命令行提示符运行yarn start
  • 在 Visual Studio 中的菜单下面选 Debug -> x64 -> 本地计算机(点击绿色三角按钮启动)
    应用运行成功截图

  目录