@facilitronworks/ react-native-windows-image-采取器
一个本地人 图像和文档拾取器 涡轮模块用于 反应原生窗口 编辑 新结构 (配置/组成),由 Windows.Storage.Pickers.FileOpenPicker。 。 。 .
状况:释放前
0.1.0-pre.0),尚未发布至npm. C++的实现取自于一种航运出品的Windows应用(RNW 0.83.2,Windows-on-ARM和x64),它可以回溯到真实的图像和文件后附上传流.建设-核查. 被包装的窗体编译:自动链接到一个耗尽的 RNW 0.83.2 新存档应用中,并为ARM64调试而建立干净,生产
RNWImagePicker.dll, (中文(简体) ),.winmd, (中文(简体) ),.lib财务报告和审定财务报表.pri。 。 。 .autolink-windows正确释放两者#include <winrt/RNWImagePicker.h>财务报告和审定财务报表packageProviders.Append(winrt::RNWImagePicker::ReactPackageProvider())。 。 。 .尚未核实 : 运行时间行为 这个 project的 DLL 在设备上的(来源是生产证明,但这个项目所建的二进制尚未被执行),x64和放行配置,还没有实例应用或CI构建. 等着
0.1.0在生产中取决于它.自己盖起: 首先运行 NuGet 恢复(
msbuild -restore) (中文(简体) ). 没有它,CppWinRT目标 从来没有加载,.idl文件流经经典midl.exe改为midlrt和每个namespace声明失败MIDL2025。 。 。 .
为什么会这样
React Industrial Windows 没有维护的文件/图像拾取器. 这不是一个疏忽——每一个上游门都尝试并关闭:
@react-native-documents/picker已丢弃 Windows 和维护者 拒绝收回数字 : "数年无人加紧维持. 我觉得加入到这个回放中是不明智的(因为它会再次被维持下去)"- 反应原生窗口核心 没有计划运送一个数字 : "AFAIK没有计划 暴露一个内置的方法 进入窗口文件拾取器 为RNW... 你可能需要 暴露API自己,就像你说的, 用自己的涡轮模块。"
expo-image-picker没有 Windows 执行,以及 Expo 的 增加平台支持 只覆盖了macOS和tvOS.react-native-image-picker自此已打开 Windows 请求 2021 (英语) 财务报告和审定财务报表 2023 (英语)都没有得到答复.
RNW的亲身经历 本地模块文件 指向准确的这个结果: 发布您的自己的库 "一个现存的图书馆并不存在(或者你没有修改它的权限)"
相关的前款艺术
如果你需要的话 文档/文件夹 选取,看 @hbannro/rn-documents-picker-windows 首先,这是麻省理工学院,新建筑, 镜像 @react-native-documents/picker API,并正确解决了HWND问题. 它针对的是RNW 0.77,并且没有图像特有的表面(没有尺寸,基数64,或者图像受限制的过滤),这就是为什么这个包单独存在而不是作为它的PR存在的原因.
困难的部分是: IInitializeWithWindow
这是捕捉每个人的陷阱, 而这个代码值得分享的主要原因.
在一个 WinAppSDK / Win32 桌面 应用没有 CoreWindowA级 FileOpenPicker 试着亲亲一个, 找不到它 掷出 通常表面为不透明 E_FAIL 或绞刑,没有指向真正的原因。 采取者必须明确与应用软件的顶级相关联 HWND 通过经典的COM接口 IInitializeWithWindow数字 :
#include <shobjidl_core.h>
auto initWithWindow = picker.as<::IInitializeWithWindow>();
initWithWindow->Initialize(ResolveHostWindow());
容易出错的另外两个制约因素:
- 选取必须运行在UI线上. 对话框为模式并归应用程序窗口所有 。 这个模块以小的
ResumeOnDispatcher在创建或显示拾取者之前, 使用 coroutine 等待器 . - 这个
HWND必须是真正的顶级窗口. 此模块更喜欢从WinMain,然后回到GetActiveWindow()财务报告和审定财务报表GetForegroundWindow()——两个有效的倒计时精确地 因为 选择已经运行在拥有应用程序窗口的线条上.
安装
npm install @facilitronworks/react-native-windows-image-picker
# or: yarn add @facilitronworks/react-native-windows-image-picker
然后自动连接和重建:
npx react-native autolink-windows
npx react-native run-windows
这就是所有的建筑线。 货真价实
windows/RNWImagePicker/RNWImagePicker.vcxproj 加一个 react-native.config.js
宣布它为Windows的直接依赖,所以 autolink-windows 添加
ProjectReference 向您的应用项目发送服务商注册信息
您的生成 AutolinkedNativeModules.g.cpp。没有什么可以复制的,和
没什么可补充的 .vcxproj。 。 。 .
要求 新结构 —— 说 <RnwNewArch>true</RnwNewArch> 在你的应用软件
windows/ExperimentalFeatures.props. 针对RNW 0.83.x.
一体化
自动链接注册 模块 - 责任 REACT_MODULE 被捡起来
由这个图书馆自己 ReactPackageProvider,该调用
AddAttributedModules(packageBuilder, true) 代表你们 然后可以到达
来文人: NativeModules.RNWImagePicker,或者通过输入的包装
src/index.ts (见 使用量) (中文(简体) ).
手动一步还剩:主机窗口. 自动链接无法注册您的
HWND所以这个钩子是你的 打过一次电话 WinMain在应用程序之后
窗口创建 :
// <winrt/RNWImagePicker.h> is already pulled in for you by AutolinkedNativeModules.g.h
winrt::RNWImagePicker::ImagePicker::SetHostWindow(reinterpret_cast<uint64_t>(hwnd));
SetHostWindow 预测为静态 ImagePicker 运行时级相当
因为自动将您的应用程序连接起来
图书馆 WinMD 投影 (单位:千美元)<winrt/RNWImagePicker.h>)但并非其生来
信头 — 和库链接作为自己的 DLL, 其导出只是 WinRT
启动入口 内部自由职能
RNWImagePicker::SetHostWindow(void*) 任何卖家仍然可以
直接来源.
为什么它很重要: 就是这个 全数 取取器窗口的可靠来源
父母必须直接从 AppWindow rNW 主机
创建,而不是推断。 如果你跳过它 GetActiveWindow 编号 :
GetForegroundWindow 倒计时通常有效 但"通常"不是你想要的
在模式对话框后.
未来的版本更可取
ReactCoreInjection::GetTopLevelWindowId(context.Properties().Handle())这么说WinMain钩入可选. 目前的倒转链是实际已运出的版本,所以它是这里所发表的.
使用量
import {
launchImageLibraryAsync,
launchDocumentPickerAsync,
isAvailable,
} from '@facilitronworks/react-native-windows-image-picker';
// Pick a single image
const result = await launchImageLibraryAsync({ base64: false });
if (!result.canceled) {
const [asset] = result.assets!;
console.log(asset.uri, asset.width, asset.height, asset.mimeType);
}
// Pick one or more arbitrary documents
const docs = await launchDocumentPickerAsync();
if (!docs.canceled) {
for (const doc of docs.assets!) {
console.log(doc.fileName, doc.fileSize, doc.mimeType);
}
}
结果形状
{
canceled: false,
assets: [
{
uri: 'file:///.../LocalState/PickedFiles/<name>',
fileName: 'photo.jpg',
mimeType: 'image/jpeg',
fileSize: 1048576,
type: 'image', // 'file' for documents
width: 4032, // images only
height: 3024,
base64: undefined, // only when requested
exif: null
}
]
}
取消解决 { canceled: true, assets: null } - 确实 没有 拒绝。 拒绝只针对真正的失败.
为什么要复制文件
每个选中的文件都被复制到 LocalFolder\PickedFiles 返回时 uri 点在该副本。 A 类 StorageFile 由拾取者交回的由经纪人调解的接入方式无法可靠地通过传递到其他子系统作为平坦路径;复制会给您一个稳定的位置,您可以读取,上传,反转. 模块在每个进程上扫描一次已过时的拷贝,因为没有其他东西可以删除它们.
API 密码
| 函数 | 说明 |
|---|---|
launchImageLibraryAsync(options?) | 选择单个图像( 仅图像文件类型) . |
launchDocumentPickerAsync(options?) | 选择一个或多个任何类型的文件 . |
requestMediaLibraryPermissionsAsync(writeOnly?) | 总是在桌面上授予; 对于 API 对称性 . |
getMediaLibraryPermissionsAsync(writeOnly?) | 如上说. |
isAvailable() | true 当在Windows上运行并注册了本地模块时. |
options.base64 这是今天唯一可以选择的. quality 财务报告和审定财务报表 selectionLimit 被接受和忽略 launchImageLibraryAsync (单选).
路线图
- 独立
.vcxproj+ 键ReactPackageProvider+ 键react-native.config.js因此这个安装和自动链接为普通软件包 - 校验工程实际编译,并自动连接到真实的应用程序
ReactCoreInjection::GetTopLevelWindowId来制作WinMain钩子可选- 示例应用程序 + CI 构建
- 相机捕获( 目前是一个单独的模块)
- 文件夹选择/ 保存选择器
- 发布到 npm 并注册到 反应-原生-社区/指导
捐款
问题和PR是值得欢迎的,特别是构建网络和RNW版本兼容报告。 这被维持为生产应用的副产品,所以诚实的维护承诺是:它将继续研究应用船只的RNW版本.
许可证
麻省理工学院——见 自由主义。 。 。 .