ReactNativeを初めて触ってみた

## ReactNative

[公式ページ](https://facebook.github.io/react-native/)

> Build native mobile apps using JavaScript and React

まずは公式ページの [Quick Start](https://facebook.github.io/react-native/docs/getting-started)を試してみたいと思います。

###  :computer:環境構築
****
ReactNativeアプリを構築するのに2種類ある。
- [Expo](https://expo.io/)

      Expoは新しいReact Nativeアプリケーションを構築する最も簡単な方法です。
      ネイティブコードを構築するためのツールをインストールまたは設定することなくプロジェクトを開始できます
      XcodeやAndroid Studioのインストールは不要です


- Building project with Native Code
    - react-native-cliなどを使って構築していく

今回は触ってみる程度なので、**Expo**を使ってサンプルを動かしてみたいと思います。

環境

```
- node: 9.5.0
```
- expo-cliのインストール

```sh
$ npm install -g expo-cli
```

- サンプルプロジェクトを作成し起動

```sh
$ expo init expo-sample
? Choose a template: 
  blank
  minimum dependencies to run and an empty root component 
❯ tabs
  several example screens and tabs using react-navigation 
? Choose which workflow to use: managed
? Yarn v1.3.2 found. Use Yarn to install dependencies? Yes
```
templateは `tabs` 、workflowは `managed`、Yarn を使うは `Yes` を選択 し
プロジェクトの作成と起動を行います。

```sh
$ cd expo-sample
$ yarn start
```

![image.png (124.8 kB)](https://img.esa.io/uploads/production/attachments/5529/2019/02/17/18452/7f3fd26e-3fe5-4256-a73c-e50c5c324c88.png)

無事に起動できたっぽい :sparkles:
試しに `Run on iOS simulator` をクリックしてiOSシュミレータで起動してみると
Expoのクライアントアプリがインストールされ、アプリが起動されました。
<img width="235" alt="スクリーンショット 2019-02-17 14.13.22.png (616.3 kB)" src="https://img.esa.io/uploads/production/attachments/5529/2019/02/17/18452/b3351b28-0448-470e-a95b-4be51b2b39a8.png">

実機の場合は Androidだと ExpoアプリをインストールしてQRコードを読み取ればOKでした。
iOSの場合、ExpoアプリをインストールしてリンクをメールかSMSで送信し、
Safari経由でdeeplinkを開くとアプリが起動されました!

参考URL
- [Expo環境構築](https://qiita.com/yacchi1123/items/5a3d16f0d92d3912e5c4)

### :pencil: 実装
****

#### ちゃんとHot Reloadingされるか試してみる

試しに `Change this text and your app will automatically reload.` となっている箇所を変更してみます...:eyes:
<img width="235" alt="スクリーンショット 2019-02-17 14.32.06.png (650.5 kB)" src="https://img.esa.io/uploads/production/attachments/5529/2019/02/17/18452/a3e262a3-77b2-43ed-a7c8-0fba0fdf47ba.png">

ちゃんとreloadされた書き替えされました :sparkles: 
<img width="235" alt="スクリーンショット 2019-02-17 14.33.26.png (636.1 kB)" src="https://img.esa.io/uploads/production/attachments/5529/2019/02/17/18452/fbb97c35-b4af-498c-ad28-a55be65cf254.png">

普段iOS/Androidをネイティブで開発している人にとっては嬉しい :sparkles: 

## Typescript導入

型があるのは何かと便利なので、そのままTypescriptを導入します。

```sh
$ yarn add typescript --dev
$ ./node_modules/.bin/tsc --init
$ mv App.js App.tsx
```
ひとまず↑だけでも動作しましたが、(簡単 :sparkles: )
`@types` などもインストールして環境を整えます。

```sh
$ yarn add @types/react @types/react-native @types/expo --dev
```

`tsconfig.json`を修正する。

```json
{
  "compilerOptions": {
    ...
    "jsx": "react-native"
    ...
  }
}
```

## ListViewを追加
最後にアプリ開発で頻繁に使うListViewを試してみたいと思います。
[ここ](https://facebook.github.io/react-native/docs/using-a-listview)を参考に実装

```ts
import * as React from "react";
import { FlatList, StyleSheet, Text, View } from "react-native";

interface IListData {
  key: string;
}

const listData: IListData[] = [
  { key: "Devin" },
  { key: "Jackson" },
  { key: "James" },
  { key: "Joel" },
  { key: "John" },
  { key: "Jillian" },
  { key: "Jimmy" },
  { key: "Julie" }
];

type Props = {};
export default class App extends React.Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={listData}
          renderItem={({ item }) => <Text style={styles.item}>{item.key}</Text>}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 30,
    backgroundColor: "#fff"
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44
  }
});
```

ちゃんとTypescriptの型付けもされていて、無事一覧が表示されました。
<img width="235" alt="スクリーンショット 2019-04-29 16.54.31.png (526.3 kB)" src="https://img.esa.io/uploads/production/attachments/5529/2019/04/29/18452/ccfbb9c1-e6af-45a8-80d0-c9600ccc1dfe.png">

### :link: 参考リンク
****

- [TypeScriptとExpoで始めるReactNativeアプリ開発](http://otiai10.hatenablog.com/entry/2018/11/21/152730)
- [Microsoft/TypeScript-React-Native-Starter](https://github.com/Microsoft/TypeScript-React-Native-Starter)