如何在 typescript react-native 项目中导入降价文件?
Posted
技术标签:
【中文标题】如何在 typescript react-native 项目中导入降价文件?【英文标题】:How to import a markdown file in a typescript react-native project? 【发布时间】:2019-11-02 19:58:17 【问题描述】:我尝试通过 2 种方式将 markdown 文件导入到我的 typescript react-native 项目中。
import * as readme from "./sample.md"
import readme from "./sample.md"
两者都不起作用。所以我找到了a similar issue reported previously 并提到要创建一个typings.d.ts 文件来声明模块,我也尝试过,但它仍然不起作用。
declare module "*!txt"
const value: any;
export default value;
declare module "*.md"
const value: any;
export default value;
编辑: Vscode 上没有导入错误,但在 react-native 应用程序本身上,它说它找不到模块'./sample.md',因为它只是在寻找(.native|.ios|.json|.ts 等)文件。
任何帮助将不胜感激,被困在这方面太久了。 谢谢!
【问题讨论】:
【参考方案1】:-
在项目目录之一中创建一个类型定义(index.d.ts)文件,并放入以下代码。
declare module "*.md";
-
添加
tsconfig.json -> CompilerOptions -> typeRoots
如下
"compilerOptions":
...
"typeRoots": [ "<types-directory-created-in-#1>", "./node_modules/@types"],
...
-
在您的组件中
import React, useEffect, useState from 'react';
import readme from 'path/filename.md';
export default function ComponentName()
const [md, setMD] = useState("");
//Use componentDidMount(): if class based component to load md file
useEffect(() =>
fetch(readme)
.then(data => data.text())
.then(text =>
setMD(text);
)
, []);
return (
<div>md</div>
)
【讨论】:
以上是关于如何在 typescript react-native 项目中导入降价文件?的主要内容,如果未能解决你的问题,请参考以下文章