前言：这篇本来是自己几年前捣鼓时的记录，也没有用仔细用 markdown 写，并且可能不是太条理，现在基本都忘了，因为也不搞这个了，也懒得再重新梳理一遍了，凑合看吧。但是说不定就能帮到谁呢，就放上来了。
提前准备：nodejs，npm，visual studio 2017 community 版或以上，Windows 10 SDK Build 14393或以上
uwp 官网：https://docs.microsoft.com/zh-cn/windows/uwp/porting/desktop-to-uwp-extensions
1、安装 React Native Windows
使用 npm：
npm install --save-dev rnpm-plugin-windows
使用 Yarn,：
yarn add rnpm-plugin-windows —dev
2、在项目路径下初始化
项目根目录执行：react-native windows
初始化 react-native-windows 之后，会在项目根目录下多一个 App.windows.js 文件，原 RN 工程的ui 代码可以放在这里。
另外在根目录会新增一个 windows 文件夹，此文件夹中有一个 ProjectName.sln 文件，即 visual studio 的解决方案文件，可用 vs2017 打开，第一次打开会提示安装 uwp 项目需要的一些工具及做一些配置。
Vs2017 的解决方案中，包含有多个项目，包括 ProjectName(Universal Windows)，ChakraBridge(Universal Windows)，ReactNative(Universal Windows)等，其中除了 ProjectName(Universal Windows) 之外，其他的都存放在 node_modules 文件夹中，它默认是被 git 忽略的，所以如果对这些项目做改动，在 npm install 或者npm update 后这些改动可能会丢失，要注意。
ReactNative(Universal Windows)中自带一些已经封装好的 module，可用可修改，在测一些东西的时候也可拿来使用，比较方便
3、运行
在根目录执行 react-native start，会运行 rn 的本地服务器，服务器起来后就可以直接在 vs2017 中点运行了。
以上 1~3 参考资料：https://github.com/Microsoft/react-native-windows/blob/HEAD/docs/GettingStarted.md
4、windows 原生模块
（原生代码是 c#的）
在此只列举必要的步骤，其他可参考https://github.com/Microsoft/react-native-windows/blob/master/docs/NativeModulesWindows.md
①c# 的module 类继承ReactContextNativeModuleBase
②override 一个方法 Name ，如
public override string Name
{
get
{
return "DialogManagerWindows";
}
}
③需要由js 代码调用 native 代码的方法，需要在原生 module 类中的对应方法加上 [ReactMethod] 属性，如：
[ReactMethod]
public void showAlert(){…}
④注册 module
需要一个 package 类，继承 IReactPackage，在里面的 CreateNativeModules 方法中注册之前的 module，如：
public IReadOnlyList<INativeModule> CreateNativeModules(ReactContext reactContext)
{
return new List<INativeModule>
{
new DialogModule(reactContext)
};
}
在解决方案中自带一个 package 类，路径是 ReactNative(Universal Windows) 项目中的Shell->MainReactPackage.cs->MainReactPackage
同样这个类在 npm install 或者 npm update 时默认也会更新，所以做的改动可能会丢失。
为了方便 module 在 js代码中使用，可以在新建一个DialogModuleWindows.js,在其中 写入：
import { NativeModules } from 'react-native';
module.exports = NativeModules.DialogModuleWindows;
这样在 App.windows.js 中就可以直接导入使用了：
import DialogManager from './DialogManagerWindows';
DialogModule.showAlert();
5、第三方 sdk 使用
就目前使用过的两个 sdk 进行说明：
①iRoom sdk
将sdk 的 dll文件放到 ：
根目录-> windows -> projectName -> bin -> x86 -> Debug -> AppX 中；
也可以放到 C 盘 -> Windows -> SysWOW64（放到 system32是不对的） 中。
方法调用：
我们的 sdk 是用 c++ 编译的非托管的dll，
在调用方法前，要先用 DllImport 属性声明，如：
[DllImport(“PI_iRoom.dll”)]
public extern static int GlobalInitialize(string groupId,int ndselect,int rsport,int pisport,string domain,string logDirName);
其中的 extern static 不可缺少，在用的时候即可直接调用 GlobalInitialize 这个方法了。
②百度语音识别 sdk
Vs2017 自带一个包管理工具 NuGet，一些大的第三方厂商的 sdk 都支持使用 NuGet 来安装 sdk。
在 vs2017 中，项目 -> 管理 NuGet 程序包，直接搜索 baidu.ai 并点击下载安装即可。
之后就可以使用 sdk 中的方法了。
6、应用打包
打包类型有三种：
①App Package:旁加载使用，针对单个平台架构，比如支持只 x86，或者只支持 x64，为 .appx 文件
②App Bundle:旁加载使用，可选择同时支持哪几个架构，比如可以选择同时支持 x86 和 x64，实际上这种方式生成的 .appxbundle 文件中包含了若干个 .appx 文件，会根据运行的环境自动选择对应包安装
③App Package Upload File:与 App Bundle的主要区别是需要提交给开发人员中心，在应用商店上架。生成文件包含一个符号文件，在 Microsoft Store 中发布应用后，可以使用该符号文件分析应用性能。
目前做的一些测试使用的是 App Bundle 的方式，旁加载（sideload）即应用不提交给开发人员中心，不通过应用商店，直接发给别人使用。
打包步骤：
①配置
在项目工程的 Package.appxmanifest 文件中，可以设置程序显示名称、默认语言、程序图标、权限、包名、版本号、证书等
②打包
以使用 vs2017 打包为例：
在解决方案中的主项目上右键 → 应用商店 → 创建应用程序包，此处可以选择是否要将包传到 Microsoft Store 上，目前测试选择的是不上传。然后点击下一步。
到了“选择和配置包”界面，可以选择 package 的输出位置、版本号（可选择自动递增，不需每次手动设置）、可支持的体系架构（x64，x86，ARM），选择完成后点击“创建”，即可等待其完成。
③安装及运行
生成的包是一个文件夹，将此文件夹压缩发送给其他人即可解压缩安装使用。
文件夹中主要用到的文件：
·.appxbundle 文件，就是安装、运行程序的文件，双击即可提示安装即启动；
·.ps1 文件，是一个 windows powershell 的脚本，右键选择“使用 powershell 运行”即可安装
·dependencies 文件夹，如果使用 .appxbundle 安装程序时，提示缺少某个文件，请跟开发人员索要，那么就需要再这个文件夹中找到对应的文件并安装。
另外，安装程序可以在 powershell 中使用命令：
Add-appxbundle path.appxbundle
其中 path 是 .appxbundle 的绝对路径。
由于不同的电脑上的具体环境不同，可能某一种安装方法会失败，可以尝试其他方式。
④程序卸载
每次安装程序时，新版本会覆盖旧版本，如果要再次安装旧版本，就需要先把新版本卸载，否则无法安装
卸载方式：
在 powershell 中执行命令：
Remove-appxbundle path.appxbundle
但是实测卸载可能会不成功，建议使用各类软件管家之类的进行卸载。
7、程序读取文件的问题
uwp 程序对权限的管理比较严格，对于访问或者说读取电脑上的文件，不同的访问方式结果不同，目前看主要区分为路径访问和文件选择器访问两种
①路径访问
即在代码中直接使用文件路径尝试访问，目前发现的可以访问到文件的已知路径有两个：
C:\Program Files\WindowsApps\xxxxxxxxxxxx(程序包名)
C:\Users\admin(用户名)\AppData\Local\Packages\程序包名\LocalState。
其他位置访问不了。
②文件选择器
使用文件选择器是可以访问电脑上任何位置的文件的。
示例代码：
//创建文件选择器
var picker = new Windows.Storage.Pickers.FileOpenPicker();
picker.ViewMode = Windows.Storage.Pickers.PickerViewMode.Thumbnail;
//设置推荐路径，这里推荐为音乐库，所以默认打开音乐库文件夹
picker.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.MusicLibrary;
//过滤文件类型
picker.FileTypeFilter.Add(".wav");
//等待选择文件
Windows.Storage.StorageFile file = await picker.PickSingleFileAsync();
文件选择器选择文件有个问题需要注意，用选择器选择文件之后，获取到 StorageFile 之后不能使用 file.path 再去获取文件路径，因为这个操作仍然是没有权限的，是没有权限的。正确的做法是直接对获取到的 file 操作而不通过路径。
debugbundle 和 releasebundle ：
react-native bundle --platform windows --entry-file index.js --bundle-output windows\SecondProject\ReactAssets\index.windows.bundle --asseets-dest windows\SecondProject\ReactAssets --dev false
