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 内容-请关闭打包程序命令提示符窗口,并确保该应用程序已打开,然后运行 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
    1
    2
    3
    4
    npx react-native init <project name> --version ^0.61.5

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

安装 Windows 扩展

  • 安装 React Native for Windows 软件包
    1
    2
    3
    4
    cd <project name> 
    npx react-native-windows-init --overwrite

    // 切换到创建项目的目录下面然后安装

运行 React Native Windows 应用

  • 运行前确保浏览器已经打开
  • 在 VS Code 中运行
    • 安装 VS Code 插件: React Native Tools
    • 在应用程根目录创建文件 .vscode/launch.json,并粘贴如下内容
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      {
      "version": "0.2.0",
      "configurations": [
      {
      "name": "Debug Windows",
      "cwd": "${workspaceFolder}",
      "type": "reactnative",
      "request": "launch",
      "platform": "windows"
      }
      ]
      }
    • 运行项目
      1
      2
      3
      npx react-native run-windows

      // 第一次启动会有点慢,安装后会淡出一个命令提示符窗口,请按回车以继续
    • 按 “r” 键可以重载应用
  • 在 Visual Studio 中运行
    • 在 Visual Studio 中打开解决方案文件(如:”\windowsAppDemo\windows\windowsAppDemo.sln”)
    • 如果 Visual Studio 显示无法加载,可以关闭 Visual Studio 然后重新打开
    • 在项目目录项目下打开命令行提示符运行yarn start
    • 在 Visual Studio 中的菜单下面选 Debug -> x64 -> 本地计算机(点击绿色三角按钮启动)

应用运行成功截图

赞赏

本文地址: http://yoursite.com/2020/05/14/01-React-Native-Windows%E4%B9%8B%E8%B5%B7%E6%AD%A5/