TSによる反応ネイティブプロジェクトで環境変数を加える方法

私たちが反応するネイティブの環境変数を使うことができる多くの方法がありますthis stack-overflow question
このブログ記事の目的は、あなたのRNプロジェクトの環境変数を使用する最も簡単で最速の方法をタイプスクリプトタイプチェックで指摘して説明することです.
我々は、便利なNPMライブラリを利用する予定ですreact-native-dotenv

Step 1 :次のパッケージをインストールします。

npm install react-native-dotenv

or

yarn add react-native-dotenv

を追加します

npm install -D @types/react-native-dotenv

or

yarn add -D @types/react-native-dotenv

ステップ2：あなたのバベルを更新します。設定。js

このブログ記事はエキスポ管理プロジェクトbabel.config.js のようになります

module.exports = function (api) {
    api.cache(true);
    return {
        presets: ["babel-preset-expo"],
        plugins: [
            [
                "module:react-native-dotenv",
                {
                    moduleName: "@env",
                    path: ".env",
                },
            ],
        ],
    };
};

ここで、modulenameは私たちが与えることができるエイリアスですreact-native-dotenv ライブラリのようにインポートすることができます.

import { ENV_VAR } from "@env" 

の代わりに:

import { ENV_VAR } from "react-native-dotenv" 

これはちょっと簡単にインポートできます:)

ステップ3：作成します。ルートディレクトリ内のenvファイルと環境変数を追加する

ENV_VAR=some-secret-value

ステップ4 :環境変数をインポートして使用します

import { ENV_VAR } from "@env" 

ステップ5 : typescriptサポートを追加する

プロジェクトでTypeScriptを使用している場合は、ステップ4で入力スクリプトがyellingしていることを確認する必要があります.
これを修正するにはenv.d.ts 以下の内容を持つルートディレクトリのファイル

declare module '@env' {
    export const ENV_VAR: string;
}

ちょっと待って!私たちはほとんど終わっている😅
この後、また、あなたの更新を更新する必要がありますtsconfig.json ファイル:

{
    "extends": "expo/tsconfig.base",
    "compilerOptions": {
        "strict": true
    },
    "typeRoots": ["./types"] // <------ you need to add this
}

そして今、我々は完了です!
このブログを読んでくれてありがとう!私はこれらの特定のユースケースのブログを書くための目標は、私は参考のために将来的に見ることができるディレクトリを作成することであり、それにもかかわらず開発者コミュニティを助ける.
私の最新の出版物の更新を得るために、以下のことを考えてください.