ReactNativeの開発環境を構築する話(Mac編)

はじめに

細々とReactNativeの開発を進めているわけですが、この度新しい開発メンバを迎え入れることになりました。
自分としてもReactNativeに触れて1年も経ってないため大して助言できるわけでもないですが、個人的には環境構築でハマった記憶があります。
なので、せめてスタートで躓かないようにと構築手順をまとめました。
Windows版はこちら→ReactNativeの開発環境を構築する話(Windows編)。

前提

XcodeやNodeやらは、探せばしっかりとまとまった記事があると思うので割愛します。
ちなみに自分は以下を参考にしました。

・Xcode
MacにXcodeをインストールする
・Node.js
MacにNode.jsをインストール
・VSCode
MacにVisual Studio Codeを導入してみる

各種設定・インストール

諸々のコマンドで掲載していますが、本来はバッチファイルにして渡した方がスムーズかもしれません。
入力したコマンドがそれぞれどういう意味かを理解してもらいたい意図もあるため、ひとつひとつ入力していってもらっています。

1. yarnとreact-native-cliインストール

npm install -g yarn
yarn global add react-native-cli

2. 必須モジュールインストール

ここは各プロジェクトによって内容が異なってくるかと思います。
お好きなようにアレンジしてください。

react-native init【プロジェクト名】 —version 0.59.9
cd【プロジェクト名】
yarn add typescript
yarn add react-native-typescript-transformer
yarn add —D @types/react @types/react-native
yarn tsc —init —pretty —jsx react
mkdir src
mv App.js src/App.tsx
touch rn-cli.config.js
yarn add —D prettier
yarn add —D tslint tslint-react
yarn add prettier —D tslint-config-prettier tslint-plugin-prettier
touch tslint.json
touch images.d.ts

3. tsconfig.jsonを修正

下記の値を追加・修正します。

tsconfig.json

{
  "compilerOptions": {
    "lib": ["es2015"],
    "allowSyntheticDefaultImports": true,
  },
  "exclude": [
    "node_modules"
  ]
}

4. index.jsのApp参照先を修正

App.jsをsrcに動かしたのでindex.jsを修正します。

index.js

/**
 * @format
 */

import {AppRegistry} from 'react-native';
// import App from './App';  // del
import App from './src/App'; // add
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

5. rn-cli.config.jsとpackage.jsonを修正

※0.57以降ではrn-cli.config.jsは不要と聞いたこともあります。

rn-cli.config.js

module.exports = {
    getTransformModulePath() {
        return require.resolve("react-native-typescript-transformer");
    },
    getSourceExts(){
        return["ts","tsx"];
    }
}

package.jsonは以下を追加

package.json

  "scripts": {
    "run-ios": "react-native run-ios",
    "run-android": "react-native run-android"
  },

6. tslint.jsonとimages.d.tsを修正

tslin設定も正直お好みです。

tslint.json

{
    "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
    "rules": {
        "jsx-no-lambda": false,
        "member-access": false,
        "interface-name": false,
        "prefer-for-of": false,
        "ordered-imports": false,
        "object-literal-sort-keys": false,
        "no-console": false
    },
    "linterOptions": {
        "exclude": [
            "config/**/*.js",
            "node_modules/**/*.js",
            "coverage/lcov-report/*.js"
        ]
    }
    
}

images.d.ts

declare module '*.svg';
declare module '*.png';
declare module '*.jpg';
declare module '*.jpeg';
declare module '*.gif';
declare module '*.bmp';
declare module '*.tiff';

7.実行

Xcodeからエミュレータを起動した状態で下記コマンドを実行

yarn run-ios

ここで下記のエラーが発生したらXcode設定を見直す

error: unable to find utility "instruments", not a developer tool or in PATH

参考
Error Running React Native App From Terminal (iOS)

成功すると以下の画面が表示されます。

感想

いざまとめてみると、結構面倒臭い箇所が多いなあという印象です。
後発メンバがスムーズに開発に取りかかれるようにするのも先駆者としての責務だと思うので、定期的にアウトプットもとい情報共有をしていきたいと思います。

また、ここで記載した内容が少しでも参考になれば幸いです。