「基礎から学ぶReact Native入門」で2024年に入門した記録 その４

P.112 依存ライブラリをインストール

コマンドが"expo install"から始まっているが、古い“Global Expo CLI”はインストールしていないのでこのコマンドは使えない。なので以下のコマンドを使用する。

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

記事内にも書いてあるが、"npx  expo install"を使うのはExpoでは使えないバージョンなどをはじいてくれるためであるそうなので、”npm install"でインストールしても大きな問題はない。もちろんアンインストールするときは"npm uninstall"でOK。

P.113 Stack Navigatorをインストールする

この本の執筆時のReact Navigationのバージョンは5.xである。2024年8月現在の最新は6.x（v7がすでにRCではあるけども）なので、細かな点が変わってくる。
"stack"ではなく"native-stack"をインストールする。

npm install @react-navigation/native-stack

P.113 リスト9.3 App.js

import { createStackNavigator } from '@react-navigation/stack';

と書かれているところを

import { createNativeStackNavigator } from '@react-navigation/native-stack';

に書き換える。

const Stack = createStackNavigator();

と書かれているところを

const Stack = createNativeStackNavigator();

に書き換える。

P.114 リスト9.4 App.js

このコードは6.xでも問題なく動作するが、6.xではもっと簡便なコードで書けるようになっているので、そのコードにする変更点を記載する。

import { useNavigation } from '@react-navigation/native';

上記の行は記載が不要。

function HomeScreen() {
  const navigation = useNavigation();

を

function HomeScreen({ navigation }) {

のように書き換える。

P.117 リスト9.6 Tab Navigatorでタブ切り替えを実装する

コード内に略と書かれているので、当然そこに書かれている前提ということなのだろうと思うが、書かれているコードだけを変更しても以下の行は当然エラーとなる。

<Tab.Screen name="Settings" component={SettingsScreen} />

これは単純に以下の公式サイトのコードをそのまま掲載しているからのようにも見えるが、"SettingScreen"部分を”DetailScreen"に変更するか、SettingScreenを作成して対応する。
Tab navigation | React Navigation

P.123 図10.2 memo-appプロジェクトを作成する

忘れないように念のため書いておきますが、ここは"expo init"ではなく

npx create-expo-app memo-app --template blank

でプロジェクトを作成します。

P.123 リスト10.1　App.jsとMainScreen.jsをセットアップする

この部分のソースコードは、９章で修正してきた部分と同様のことを行います。たとえば、インストールするのは"stack"ではなく"native-stack"で、importは'@react-navigation/native-stack'といった部分です。

// App.js

import { StyleSheet, Text, View } from 'react-native';
import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Provider as PaperProvider } from 'react-native-paper';
import { MainScreen } from './src/MainScreen';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <PaperProvider>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="Main"
            component={MainScreen}
            options={{
              title: 'メモ帳'
            }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </PaperProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

// MainScreen.js

import { StyleSheet, View } from "react-native";
import { Title } from 'react-native-paper';

export const MainScreen = () => {
    return (
        <View style={styles.container}>
            <Title>ここはメイン画面です</Title>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

10章までの主な差分はこれでおしまい。
「基礎から学ぶReact Native入門」で2024年に入門した記録 その５｜YUYA YAMAKI (note.com)に続く