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

はじめに

以前に書いたReactNativeの開発環境を構築する話(Mac編)のWindows版です。

前提

・AndroidStudio
React NativeでAndroidアプリ @ Windows 備忘録
・Node.js
[Node.js] Node.js の導入(Windows編)
・VSCode
Visual Studio Code (Windows版) のインストール

各種設定・インストール

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
move App.js src/App.tsx
copy nul  rn-cli.config.js
yarn add —dev prettier
yarn add —dev tslint tslint-react
yarn add prettier —dev tslint-config-prettier tslint-plugin-prettier
copy nul tslint.json
copy nul  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.実行

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

yarn run-android

感想

Macの場合と特に差異がないため問題なく動くかと思いますが、
何か記載漏れ等ありましたらご連絡ください。

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