React NativeでStackNavigatorを使用し一覧から詳細への遷移を実装する
過去にBottom Tabs Navigatorを作成したので、今回は、Stack Navigatorを導入する。 実装に期待する動きは、 タブ移動が可能 タブ移動後に詳細ページへの遷移が可能 上記の通りなので、Bottom Tabs NavigatorとStack Navigatorを併用する必要がある。 その前提で進めていく。 必要なパッケージをインストールする npm install @react-navigation/stack npm install react-native-gesture-handler インストール後、必要なファイルを作成する。 実装していく mkdir src mkdir src/stack touch src/screens/SampleStackScreen.tsx SampleStackScreen.tsxは下記の通りになる。 import React from 'react' import Sample from '../screens/Sample' import { createStackNavigator } from '@react-navigation/stack' import SampleDetail from '../screens/SampleDetail' const Stack = createStackNavigator() const SampleStackScreen = () => { return ( <Stack.Navigator screenOptions={{ headerShown: false }}> <Stack.Screen name="Sample" component={Sample} /> <Stack.Screen name="SampleDetail" component={SampleDetail} /> </Stack....