[typescript, react native]React Navigation画面遷移サンプルアプリのひな形作成手順

 備忘録として、

React Navigation画面遷移ライブラリの環境構築の方法を記載する。

■前提条件

・nodejsがインストールされていること

・Expo-CLI が事前にインストールされていること

>npm install -g expo-cli

1./サンプルプロジェクトを作成する

> npx expo init react-navigation-sample

2.「react-navigation-sample」フォルダに移動する

> cd react-navigation-sample

3.React Navigationのコアライブラリをインストールする

> npm install @react-navigation/native

4-1.stackを使う場合、statckをインストールする

> npm install @react-navigation/stack

4-2.bottom-tabsを使う場合、bottom-tabsをインストールする

> npm install @react-navigation/bottom-tabs

4-3.drawerを使う場合、drawerをインストールする

> npm install @react-navigation/drawer

5.react-native-paperをインストールする

npm install react-native-paper

6.React Navigationの依存ライブラリをインストールする

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

[react-native,react-navigation/drawer]createDrawerNavigator()を使用した時のエラー：Error: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin"

 react-navigation/drawerのcreateDrawerNavigator()を使用した時のエラー対応を備忘する

■エラーメッセージ

"Error: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin"

■対応手順

1.babel.config.jsに【plugins: ["react-native-reanimated/plugin"]】を追記する。

[babel.config.js]

-----

module.exports = function (api) {

  api.cache(true);

  return {

    presets: ["babel-preset-expo"],

    plugins: ["react-native-reanimated/plugin"],

  };

};

-----

2.[expo start -c]コマンドを実行する

■参考サイト

https://www.youtube.com/watch?v=Ad0LUwCytu4&ab_channel=LahoreGraphicsAcademy