I.はじめに

プロジェクト構造のレベルより、より多くのハードの導入の頭が教えている場合が多いのコンポーネントを導入するには、この方法（../../../）で使用するプロジェクトの開発にRNは、非常に面倒に感じる。それは持っています例えば、@記号がVUEプロジェクトのsrcディレクトリに。Baiduは、見つけたりした後、このような同様の構成を持って示し、直接導入が、オンラインしようとしたとき、短いパス構成、通るVUEのプログラムやプロジェクト、ありませんいくつかのプログラムは、主に私のプロジェクトのため、動作しませんでしたRN（0.59.5）に基づいて+活字体構築されています。

第二に、プログラムミスを試してみました

1.フォルダpackage.jsonを追加します。

たとえば、.. / .. / .. / ..この導入にはしたくない、ファイル内のutilsのを紹介したいのですが、@utilsに/ .....この導入は、あなたは、ファイルutilsのパッケージを置くことができます.json、以下の：

{
名前： " @utils "
}

私は成功せず試した後にプログラム、プロジェクト内のTSファイルを定期的にチェックを持っている、エラーメッセージがモジュールを見つけることができません。プロジェクトが活字体で構築されていない場合、私はそれが可能であると信じています。

2. インストールバベル・プラグイン・ルートインポート

このプログラムは、最大のオンラインサーチである。インターネットの具体的な実現、ここで説明したように、私は成功せず、手順オンラインの設定に従って、とにかく、書くことではありません。推定値はES6の建設プロジェクトに適しているだけです。

以上の二つのオプション、参照するコンポーネントをインポートするプロジェクトに反応し、ネイティブの相対パスを、おかげ暖かい風が私にいくつかのアイデアを与えました

3.使用@providesModule

ファイルの先頭には、巣複数行のコメント、コメント@providesModule、@のprovidesModule後にクラス名を追加し、将来的には、直接クラス名をインポートすることができます。

複数行が@providesModuleとコメントことに注意してください、そして、それは最初の複数行のコメントファイルでなければなりません。以下のような：

/ **
* @providesModule共通
* /
インポート{
大きさ
}反応ネイティブ 'から。
輸出デフォルトクラス共通{
静的はbgColor = 'RGB（232232232）'。
静的 screenW =外形寸法。取得。（「窓」）の幅を、
静的 screenH =外形寸法。取得。（「窓」）の高さを、
}

外部使用のための一般的な

//これは、以前に必要な
「./../Common/Common」から共通//インポート
//今直接クラス名を使用することができます
「普通」から共通のインポート
しようと、TSチェック、またはエラーの後。このプログラムは主に参照される問題を解決するためのパスにReactNativeファイル、この記事は@providesModuleの原理を導入している、興味のある学生は、それを読んでください。

4. typescriptですパスマッピングは、相対パスを配置しました

活字体プロジェクトが構築されているので、いくつかの間違った考えを試した後、その後、活字体は本質的にサポートパスの設定ではないと思いますか？確かに、活字体は相対パスをサポートするように設定されている。オンラインプログラムが利用可能に

tsconfig.jsonに設定します

{
" baseUrlに "：" ./ "、
" パス "：{
" @のhttp / * "：[" SRC / HTTP / * "]、
" @ utilsパッケージ/ * "：[" SRC / utilsの/ * "]
}
}

輸入は、このフォーム.. ../../../長いリスト、および直接比較的短いパスを使用しないときように、

インポートからのAuthService {} '@ HTTP / AUTH';
この方式を使用した後は、ファイル内のパリティtsのは、それが直接対応する宣言にリンクすることができ、与えられていません。エラーが該当するモジュールを示唆していない、APK生成される場合にはJavaScriptをコンパイルした後、パスとしないが、過去にマッピング。
これまでのところ、私が発見した、限りコンパイラは、この問題を解決するよう、解決することができます。しかし、私はそう単純ではないことが判明し、次にご紹介してみました、モジュール・エイリアスを、tsmodule-エイリアスおよびその他のプラグインでこの問題を解決するためには、正確に役に立たないと推定されコンパイルが成功し、されていません。

第三に、最終案

いくつかのより多くのターンがエラーをプログラムしようとした後、繰り返し1日、疲れた心に従事。ねえ、幸いそれは最終的にあきらめなかった、プログラムの最初の2種類で、私が導入さバベル・プラグイン・ルートインポートプラグインを、あなたはシンボルを使用することができ、代替パスを見つけました。

1.安装 babel-plugin-root-import

npm install babel-plugin-root-import --save-dev  或 yarn add babel-plugin-root-import –dev

如果 npm 没有安装成功，就用 yarn (我是使用yarn 才安装成功)

2.babel.config.js 增加如下配置

module.exports = {
plugins: [
[
'babel-plugin-root-import',
{
rootPathPrefix: '~', // `~` 默认
rootPathSuffix: 'src'
}
]
]
}

这里，我尝试过rootPathPrefix 用 @ ，在编译的时候会报错。所以不得不放弃使用@ (有些强迫症，想要用@, 因为vue项目中就是@表示src目录)

3.执行npm start -- --reset-cache命令

已有项目，记得执行此命令清理缓存，这点非常重要，我在调试的过程中，变更过几次符号的配置，如果变更配置后没有执行该命令，则配置不起作用

4. 设置typescript相对路径

在 tsconfig.json 中设置

{
"baseUrl": "./",
"path": {
"~/*": ["src /*"],
}
}

注意:变更设置之后，最好重启下VSCode

至此，我们在项目中引入文件可以用以下优雅的方式

import { UserAccount } from '~/constants/const'
import MyTheme from '~/assets/commonStyle'

四、总结

项目是使用 TypeScript + Dva构建的RN项目，该问题网上给出的一些方案都是基于 ES6构建的RN项目，所以之前的解决方案，都不适应。再加上我学习TypeScript 和 RN的时间不长，很多理论知识学习不到位。所以花了比较长的时间。我正在搭建基于TypeScript + Dva + RN + React-Navigation 的App开发框架，欢迎有兴趣的同学一起交流。后续，也会把我搭建的项目框架，进行开源, 目前还只实现了一些基础建设，哈哈~~。

以下是我项目框架的目录:

活字体はRNベースのプロジェクト相対パスのコンポーネントの導入の問題を解決します