React本机:特定于平台的导入

Question

有这种奇怪的情况。生成响应本机，并使用来自对讲机的本机包。当android或ios时，导入它可以正常工作。但是对于web (或节点玩笑)，它会抛出一个错误。所以必须做一些像这样的面部模式的“黑客”

公用设施/对讲机/index.ios.ts

export { default } from '@intercom/intercom-react-native'

公用设施/对讲机/index.web.ts

export default function Intercom() {}

一些使用对讲机的文件

// @ts-ignore
import Intercom from '~/utilities/Intercom' // Cannot find module '~/utilities/Intercom' or its corresponding type declarations.ts(2307)

...

Intercom.logout() // no TS support

不仅TS抱怨，而且我也失去了所有类型

还有其他方法来完成特定于平台的导入和保留本机类型吗？

jest (节点)中的错误是Cannot read property 'UNREAD_CHANGE_NOTIFICATION' of undefined，这也是在它们的文档中描述的。问题是我不能在使用expo附带的react本地网站时模仿它。

Answer 1

我想这就是你要找的https://stackoverflow.com/a/43531355/1868008

在您的utilities目录中，创建一个名为Intercom.d.ts的文件，然后放置以下位置

import DefaultIos from "./Intercom/index.ios";
import * as ios from "./Intercom/index.ios";
import DefaultWeb from "./Intercom/index.web";
import * as web from "./Intercom/index.web";

declare var _test: typeof ios;
declare var _test: typeof web;

declare var _testDefault: typeof DefaultIos;
declare var _testDefault: typeof DefaultWeb;

export * from "./Intercom/index.ios";
export default DefaultIos;

不知道这些都是什么。也许是在打字稿内部的东西。

对于测试，您似乎需要模拟您正在测试的代码中使用的每个方法，例如，在这个App组件中；我使用的是logEvent方法，所以我在库的模拟对象中返回它

import React from "react";
import renderer from "react-test-renderer";

import App from "./App";
jest.mock("@intercom/intercom-react-native", () => ({ logEvent: jest.fn() }));

describe("<App />", () => {
  it("has 1 child", () => {
    const tree = renderer.create(<App />).toJSON();
    expect(tree.children.length).toBe(1);
  });
});

App.tsx

...
import Intercom from "./utilities/Intercom";

export default function App() {
  Intercom.logEvent("test", {});
   ...
}

对于web实现，可以导入类型以确保符合库接口。

import type { IntercomType } from "@intercom/intercom-react-native";

const webImplementation: IntercomType = {
  // here implement all methods
};

export default webImplementation;

https://github.com/diedu89/expo-isomorphic-import-ts