パッケージ取り付けには糸を使用しています.確認して、インストールした部分をスキップ!

1.homebrewのインストール

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

インストールを完了します.

brew --version

確認バージョンを入力します.
設置上の注意事項https://brew.sh/

2.インストールノード

brew install node

インストール完了後

node --version and npm --version

インストールの確認を入力します.

3.watchmanのインストール

brew install watchman

インストール完了後

watchman -version

インストールの確認を入力します.

4.react-ネイティブ-cliのインストール

npm install -g react-native-cli

インストール完了後

 react-native --version

インストールの確認を入力します.

5.Xcodeのインストール

アプリケーションストアでxcodeを検索してダウンロードします.
実行後、「コマンド+」タブに入り、「推奨ラインtools」を選択します.次のようにします.

6.cocoapodsのインストール

sudo gem install cocoapods

インストール完了後

pod --version

インストールの確認を入力します.

7.Java開発キットのインストール（JDK）

brew tap AdoptOpenJDK/openjdk

brew install --cask adoptopenjdk

順番に運転し、インストールが完了したら

java -version

インストールの確認を入力します.
Java開発キットをインストールすると、javaのほかにjavaをコンパイルするためのjavaコンパイラもインストールされます.
javaコンパイラが正しくインストールされていることを確認するには、次のコマンドを実行します.

javac -version

8.android studioのインストール

https://developer.android.com/studio?hl=ko
上のリンクにアクセスしてAndroid Studioをダウンロードします.
ダウンロードが完了したら、実行してインストールします.
次に、アンドロイドスタジオの環境変数を次のように設定します.

vi ~/.zshrc

上のコマンドを使用します.zshrcファイルへ

export ANDROID_HOME=안드로이드 SDK 위치/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

追加します.
△コピーができない場合は、そのまま入力しましょう.
Android SDKの位置はsdk managerを実行することで確認できます.(以下の画像を参照)
Android Studioの実行>右下隅の構成をクリック>SDK Managerの実行
自分のアンドロイドの位置は通常/Users/{USER NAME}/Library/Android/sdkです.

プロジェクトの設定

(typescript, styled-components, babel-plugin-root-import)

1.Init

react-ネイティブ-cliのインストール

npx react-native init <프로젝트명>

固定バージョン

npm config set save-exact=true

2.typescript、styled components、babel-plugin-root-importを追加します。

プロジェクトに入る

yarn add styled-components

yarn add --dev typescript @types/react @types/react-native @types/styled-components babel-plugin-root-import

3. tsconfig.json

tsconfig.最上位レベルにjsonファイルを作成します.

{
    "compilerOptions":{
        "allowJs":true,
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        "isolatedModules":true,
        "jsx":"react",
        "lib":["es6"],
        "moduleResolution":"node",
        "noEmit": true,
        "target":"esnext",
        "baseUrl":"./src",
        "paths":{
            "src/*":["*"]
        }
    },
    "exclude": ["node_modules","babel.config.js","metro.config.js","jest.config.js"]
}

の草案を作る

4. babel.config.js

絶対パスbabelを追加します.config.jsファイルに次の内容を追加します.

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'babel-plugin-root-import',
      {
        rootPathPrefix: 'src',
        rootPathSuffix: 'src',
      },
    ],
  ],
};

ex)絶対パス使用例
絶対パスとして使用できるようになりました

エラーまたは絶対パスが見つからない場合は、プロジェクト内iosディレクトリに移動します.

pod install

うんてん

yarn start --reset-cache
and 
yarn ios or yarn android

キャッシュを削除して再実行します.
(configを変更した場合は、キャッシュを削除してpodを再インストールしたほうがいいです.)

5.react-navigaionの設定

yarn add @react-navigation/native

必要なナビゲーションを追加します.

#Stack Navigation
#Drawer Navigation
#Bottom Tab Navigation
#Material Bottom Tab Navigation
#Material Top Tab Navigatioin

Gitクローン後

yarn install 
and
cd ios
and
pod install

実行

yarn start 
and
yarn ios or yarn android

Androidの実行中にエラー(構築に失敗)
アンドロイドスタジオを稼働後
「Open an Existing Project」をクリックします.
プロジェクトフォルダのandroidフォルダを開きます.
上部アイコンのデバイスの横にある再生ボタンをクリックすると、シミュレータが起動します.
(アンドロイドフォルダにlocal.propertiesファイルがない場合は、そのファイルが作成されます.私の場合、存在します.)

該当するボタンをクリックして、プロジェクトの構成をローカル状態と「./gradlewcleanに同期します.
既存のコンストラクションファイルを整理します.
完了したら、プロジェクトのアンドロイドフォルダに入ります.

./gradlew clean

実行してプロジェクトルートディレクトリに戻ります.

yarn start --reset-cache
and
yarn android 

実行