[React Native + Expo] ExpoをTypeScriptで触ってみる3 -アプリぽくする-

前回まででExpoを動かすところまで来たので、アプリっぽい感じにしていきます。Web屋さんがアプリっぽいのを作ったらテンション上がりますもんね！

ゆーて、React Navigation をなぞっていきます。

// まずReact Navigationをインストール
npm install @react-navigation/native

// React NavigationとExpoを繋げる感じ
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

これでReact Navigationを使う前段階が出来上がりました。
ということで、一般的なアレを表示させてみようと思います。
（この段階ではReact Navigationは関係ないw）


App.tsxを下記コードに置き換えます。

import 'react-native-gesture-handler';
import { Text, View } from 'react-native';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>{"Hello Expo"}</Text>  
      </View>
    </NavigationContainer>
  );
}

では、まず動かします

expo start

出てきたQRコードをスマホで読み取ります。中央に例のアレが表示されると思います。 Expoのすごいところが、ホットリロードが早いのです。
試しにソースコードの{“Hello Expo”}の部分を適当な文字列に変更して保存してみてください。スマホの画面も文字も変更されます。
私はExpoのこの早さ最初は驚きました。

ではでは、表題のReact Navigationを使っていきます。
React NavigationのStackとやらを使っていきますのでインストールします。

npm install @react-navigation/stack

ここからちょろちょろと色々書いていくのですが、React NavigationのサイトではApp.tsxに全て書いていっているのですが、ここではファイルを分けていきます。
ディレクトリ構成は以下（componentsやconstantsはまだ空） screensにHomeScreen.tsx と DetailsScreen.tsxを作成します。
また、React NavigationでいうとApp.tsxに書かれている関数を書いていきます。

App.tsx

import 'react-native-gesture-handler';
import * as React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';

export default function App() {

  const Stack = createStackNavigator();

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

HomeScreen.tsx

import * as React from 'react';
import { View, Text, Button } from 'react-native';

export default function HomeScreen({ navigation }: any) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
  </View>
  );
}

DetailsScreen.tsx

import * as React from 'react';
import { View, Text, Button } from "react-native";

export default function DetailsScreen({ navigation }: any) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button
        title="Go to Details... again"
        onPress={() => navigation.push('Details')}
      />
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      <Button title="Go back" onPress={() => navigation.goBack()} />
      <Button
        title="Go back to first screen in stack"
        onPress={() => navigation.popToTop()}
      />
    </View>
  );
}

以上で動かしてみると以下の様にページ遷移の様な動きが実装できます。
なんと、ちゃんとスワイプでも前画面に戻ることが出来ます！

今回はとりあえずここまで。
にしてもエミュレータでも動画を録画出来るんですね。

$ xcrun simctl io booted recordVideo ファイル名.mov

ディレクトリはどこでも平気で、起動しているエミュレータが録画されるぽいです。
終了するときは Ctrl + C です。