Posted at

ReactNativeを初めて触ってみた


ReactNative

公式ページ


Build native mobile apps using JavaScript and React


まずは公式ページの Quick Startを試してみたいと思います。


:computer:環境構築


ReactNativeアプリを構築するのに2種類ある。

- Expo

  Expoは新しいReact Nativeアプリケーションを構築する最も簡単な方法です。

ネイティブコードを構築するためのツールをインストールまたは設定することなくプロジェクトを開始できます
XcodeやAndroid Studioのインストールは不要です


  • Building project with Native Code


    • react-native-cliなどを使って構築していく



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

環境

- node: 9.5.0


  • expo-cliのインストール

$ npm install -g expo-cli


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

$ 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 を選択 し

プロジェクトの作成と起動を行います。

$ cd expo-sample

$ yarn start

image.png (124.8 kB)

無事に起動できたっぽい :sparkles:

試しに Run on iOS simulator をクリックしてiOSシュミレータで起動してみると

Expoのクライアントアプリがインストールされ、アプリが起動されました。

スクリーンショット 2019-02-17 14.13.22.png (616.3 kB)

実機の場合は Androidだと ExpoアプリをインストールしてQRコードを読み取ればOKでした。

iOSの場合、ExpoアプリをインストールしてリンクをメールかSMSで送信し、

Safari経由でdeeplinkを開くとアプリが起動されました!

参考URL

- Expo環境構築


:pencil: 実装



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

試しに Change this text and your app will automatically reload. となっている箇所を変更してみます...:eyes:

スクリーンショット 2019-02-17 14.32.06.png (650.5 kB)

ちゃんとreloadされた書き替えされました :sparkles:

スクリーンショット 2019-02-17 14.33.26.png (636.1 kB)

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


Typescript導入

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

$ yarn add typescript --dev

$ ./node_modules/.bin/tsc --init
$ mv App.js App.tsx

ひとまず↑だけでも動作しましたが、(簡単 :sparkles: )

@types などもインストールして環境を整えます。

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

tsconfig.jsonを修正する。

{

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


ListViewを追加

最後にアプリ開発で頻繁に使うListViewを試してみたいと思います。

ここを参考に実装

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の型付けもされていて、無事一覧が表示されました。

スクリーンショット 2019-04-29 16.54.31.png (526.3 kB)


:link: 参考リンク