React-Native-Windows 开发环境

资源准备

windows官方两个 React-Native-Windows文档

开发React-Native-Windows之前的前置条件看这里：

适用于 Windows 桌面应用开发的 React Native | Microsoft Docs安装适用于 Windows 的 React Native，并使用 React Native 组件开始进行 Windows 桌面应用的开发。https://docs.microsoft.com/zh-cn/windows/dev-environment/javascript/react-native-for-windowsReact-Native-Windows的helloworld看这里：

Get Started with Windows · React Native for Windows + macOSThis guide will help you get started on setting up your very first React Native for Windows app.https://microsoft.github.io/react-native-windows/docs/getting-started

工程创建和开发调试

具体要看文档描述，我这里只是简要说明步骤

在第二份文档里面按照文档进行

• react工程初始化

npx react-native init <projectName> --template react-native

• 安装windows的交叉编译环境

npx react-native-windows-init --overwrite

• 运行并进行调试

文档写了三种方法：纯终端、Visio Studio和VsCode，这几种方法我都尝试过，只有Visio Studio是可以顺利进行调试的，其他两个总是出现莫名其妙的错误

Visio Studio环境进行调试的例子如下：

1、打开 windows\mynativeapp.sln  （mynativeapp.sln 是"npx react-native-windows-init"生成的解决方案）

2、调整编译配置：

3、在工程根目录打开终端，如下图（你也可以在其他地方打开终端）

 然后执行以下指令：

npx react-native autolink-windows --sln=windows\mynativeapp.sln --proj=windows\mynativeapp\mynativeapp.vcxproj --logging

 这里要注意一下，运行npx react-native是需要传参数的，原文没有具体讲到，只是一笔带过

等待出现如下log就成功了

 4、继续在终端运行 npm start

npm start

等待metro启动后

5、就进行程序启动，代码会自己先编译后就启动

6、会弹出窗口，经过几秒转圈载入后就会进入APP界面：

 并且可以在终端看到metro在后台更新数据

7、接下来就可以愉快的编写APP了，可以尝试在App.tsx中修改，保存后就会动态更新到程序中