Edited at

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 -g add react-native-cli


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

ここは各プロジェクトによって内容が異なってくるかと思います。

お好きなようにアレンジしてください。

react-native init【プロジェクト名】 —version 0.59.9

cd【プロジェクト名】
yarn add —dev typescript
yarn add —dev react-native-typescript-transformer
yarn add —dev @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 —dev prettier
yarn add —dev tslint tslint-react
yarn add prettier —dev 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)

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

screenshot.png


感想

いざまとめてみると、結構面倒臭い箇所が多いなあという印象です。

後発メンバがスムーズに開発に取りかかれるようにするのも先駆者としての責務だと思うので、定期的にアウトプットもとい情報共有をしていきたいと思います。

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