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 -> 本地计算机（点击绿色三角按钮启动）