如何在 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 项目中导入降价文件?的主要内容,如果未能解决你的问题,请参考以下文章

如何导入其他 TypeScript 文件?

如何在 TypeScript 中执行字符串插值?

在typescript项目中引入如何js依赖

如何在1分钟内学会“TypeScript”

如何在 VSCode 中禁用 TypeScript 警告?

typescript+reactjs+requirejs:如何将 react-dom 导入 typescript