React NativeでTypeScriptを使うメモ

# React NativeでTypeScriptを使うメモ

React NativeでTypeScriptを使おうと思っていろいろ調べたのですが、
結構つまずいたので備忘録的に残しておこうと思います。

# プロジェクトの作成
## 1. `yarn` のインストール
`yarn`を使用したいので、`yarn`を先に入れておきます。

- npmでグローバルインストール
  - `% npm install -g yarn`

- Homebrewでインストール
  - `% brew install yarn`

##  2. `react-native-cli` のインストール
```
% yarn global add react-native-cli
```

## 3. プロジェクトの作成
```
% react-native init [project-name]
```

## 4. 依存関係の追加
- `typescript`
- `@types/react`
- `@types/react-native`
- `@types/jest`

を追加します  

```
$ yarn add typescript @types/react @types/react-native @types/jest --dev
```

## 5. `tsconfig.json` の作成
`tsc --init`で自動生成されるものを一部変更しました。

```json:tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": ["es5","es6","dom"],
    "allowJs": true,
    "jsx": "react-native",
    "sourceMap": true,
    "outDir": "./build",
    "rootDir": "./src",
    "removeComments": false,
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "moduleResolution": "node",
    "types": ["react", "react-native"],
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "src/__tests__",
    "index.js",
    "build",
    "node_modules"
  ]
}
```

## 6. TypeScript用にファイルを編集
- App.jsは使用しないので、削除してしまい、代わりに`src/index.tsx`を作成します

```
% rm App.js
% touch src/index.tsx
```

```javascript:index.js
import { AppRegistry } from 'react-native';
// import App from './App';
import App from './build';

AppRegistry.registerComponent('[project-name]', () => App);
```

```typescript:src/index.tsx
import * as React from 'react';
import { StyleSheet, Text, View } from "react-native";

interface Props {

}

interface State {

}

const styles: any = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#F5FCFF',
    },
    welcome: {
      fontSize: 20,
      textAlign: 'center',
      margin: 10,
    },
    instructions: {
      textAlign: 'center',
      color: '#333333',
      marginBottom: 5,
    },
});

export default class App extends React.Component<Props, State> {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome to React Native
                </Text>
                <Text style={styles.instructions}>
                    To get started, edit index.tsx
                </Text>
                <Text style={styles.instructions}>
                    Press Cmd+R to reload, {"\n"}
                    Cmd+D or shake for dev menu
                </Text>
            </View>
        );
    }
}
```

ここまでで、とりあえず動くようになるはずです。

# プロジェクトの実行
ここからは、実行の仕方について記載します。

## 1. Scriptの追加
先に、`package.json`にスクリプトをいくつか追加しておきます

```javascript:package.json
・・・
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "android": "node node_modules/react-native/local-cli/cli.js run-android",
    "ios": "node node_modules/react-native/local-cli/cli.js run-ios",
    "prebuild": "rm -rf build",
    "build": "tsc",
    "test": "jest"
  },
・・・
```

## 2. 依存関係の追加
```
% yarn
```

## 3. React Native サーバの立ち上げ
```
% yarn start
```

## 4. Typescriptのビルド
```
% yarn run build
```

## 5. アプリの実行
### iOS
```
% yarn run ios
```
### Android
```
% yarn run android
```

<img src="https://qiita-image-store.s3.amazonaws.com/0/84888/f0d0c0d5-4e3b-849c-447d-0f84d212a2d4.png" width=40%">

シミュレータが起動して、このような画面になれば、正常に実行できています。