React Native Windows自定义原生模块开发求助：NativeModules对象为空

问题概述 #

无C#/C++开发经验，尝试为React Native Windows（RNW）开发原生USB BLE打印模块，按官方文档操作后无法运行：

• 分步操作仍出现编译报错，解决错误后JS端NativeModules对象为空
• 尝试集成简单加法模块、官方示例均失败，仅新建空白RNW项目可正常运行

用户提供的模块头文件代码：

#pragma once

#include "winrt/Microsoft.ReactNative.h"

namespace winrt::Calculator::implementation
{
    struct ReactPackageProvider : winrt::implements<ReactPackageProvider, winrt::Microsoft::ReactNative::IReactPackageProvider>
    {
    public: // IReactPackageProvider
        void CreatePackage(winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder) noexcept;
    };
} // namespace winrt::Calculator::implementation

加法模块实现代码：

// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.

#pragma once

#include "pch.h"

#include <functional>
#define _USE_MATH_DEFINES
#include <math.h>

#include "NativeModules.h"
#include "../../codegen/NativeFancyMathSpec.g.h"

namespace Calculator
{
    REACT_MODULE(FancyMath);
    struct FancyMath
    {
        using ModuleSpec = Calculator::FancyMathSpec; 

        REACT_GET_CONSTANTS(GetConstants)
        FancyMathSpec_Constants GetConstants() noexcept
        {
            FancyMathSpec_Constants constants;
            constants.E = M_E;
            constants.Pi = M_PI;
            return constants;
        }

        REACT_METHOD(Add, L"add");
        double Add(double a, double b) noexcept
        {
            double result = a + b;
            AddEvent(result);
            return result;
        }

        REACT_EVENT(AddEvent);
        std::function<void(double)> AddEvent;
    };
}

核心排查与修复步骤 #

1. 补全PackageProvider的实现 #

用户提供的ReactPackageProvider仅声明了CreatePackage方法，未实现模块注册逻辑，这是NativeModules为空的核心原因。需在对应.cpp文件中添加实现：

#include "ReactPackageProvider.h"
#include "FancyMath.h" // 确保路径指向你的模块头文件

namespace winrt::Calculator::implementation
{
    void ReactPackageProvider::CreatePackage(IReactPackageBuilder const& packageBuilder) noexcept
    {
        // 注册FancyMath模块
        packageBuilder.AddModule(winrt::Calculator::FancyMath());
    }
}

2. 验证代码生成与文件路径 #

• 确保已安装@react-native-windows/codegen依赖，执行npx react-native-windows-codegen生成NativeFancyMathSpec.g.h等代码文件
• 检查#include "../../codegen/NativeFancyMathSpec.g.h"的路径是否与实际文件位置匹配，路径错误会导致编译失败

3. 确认模块在项目中的注册 #

在RNW项目的App.cpp或MainReactNativeHost.cpp中，添加ReactPackageProvider的注册代码：

#include "winrt/Calculator/ReactPackageProvider.h"

void Initialize(IReactNativeHost const& reactNativeHost)
{
    // 将自定义模块提供者添加到宿主
    reactNativeHost.PackageProviders().Append(winrt::Calculator::ReactPackageProvider());
    // ...其他初始化代码
}

4. 检查JS端调用逻辑 #

JS端需正确通过NativeModules获取模块，确保没有拼写错误：

import { NativeModules } from 'react-native';
const { FancyMath } = NativeModules;

// 测试调用示例
console.log('Pi常量:', FancyMath.Pi);
FancyMath.add(2, 3).then(result => console.log('加法结果:', result));

5. 编译与调试注意事项 #

• 以管理员身份启动Visual Studio，避免权限不足导致的编译或部署失败
• 确认项目目标平台（x64/ARM64）与调试模式（Debug/Release）和RNW项目配置一致
• 查看Visual Studio的输出窗口和错误列表，定位具体编译错误（如头文件缺失、符号未定义等）

6. 官方示例报错的修复 #

若官方示例无法运行，优先检查版本兼容性：

• 确保react-native与react-native-windows版本严格对应
• 执行npx react-native run-windows --reset-cache清除缓存，重新构建项目

内容的提问来源于stack exchange，提问作者Omkar Lonkar