1日目: react-navigationにHello worldする

今日からReact Nativeの100日チャレンジを始めました。

Githubリポジトリはこちら → https://github.com/masarufuruya/100days-challenge-react-native

まずはよくあるタブのUIを作ろうということで、
定番のナビゲーションライブラリであるreact-navigationを使っていきます。

XCodeのインストール

iOSのシミュレーターを動かすにはXCodeが必要です。先にインストールしておきましょう。

Expoプロジェクト作成

npx create-expo-app 100days-challenge-react-native

これでプロジェクトが爆誕しました。

さっそくnpx expo startでiOSシミュレーターを立ち上げます。

立ち上がりました。開発中はショートカットのため、iOSシミュレーターだけみて、Androidは後で調整という形にして進めてみます。

react-navigationの依存パッケージをインストール

公式サイトを参考にExpoのManaged projectの場合に必要なパッケージをインストールします。

expo installしてるパッケージはネイティブが必要な機能でExpoがバンドルしているAPIを使うってことなのかな。

npm install @react-navigation/native
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

Getting started | React Navigation

react-navigationのstack navigatorを動かす

npm install @react-navigation/stack

今のv5だと、機能毎にパッケージが分かれるようになったみたいですね。
まずは公式のHello React Navigationを参考にstack navigatorのサンプルプログラムを動かします。

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

function HomeScreen() {
 return (
   <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
     <Text>Home Screen</Text>
   </View>
 );
}

const Stack = createStackNavigator();

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

export default App;

以下のような画面ができました。

おわりに

今日はreact-navigationのstack navigatorを使って、シンプルな画面を作る所まで作りました。実は本当はタブUIを作りたかったのですが、依存ライブラリで色々エラーが出てハマってしまったので、後回しにしました。

明日は出来ればタブUIのエラーを解決、時間かかりそうなら、stack navigatorの画面遷移を実装しようと思います。