# React NativeでStackNavigatorを使用し一覧から詳細への遷移を実装する
4 min read
Table of Contents
過去にBottom Tabs Navigatorを作成したので、今回は、Stack Navigatorを導入する。
実装に期待する動きは、
- タブ移動が可能
- タブ移動後に詳細ページへの遷移が可能
上記の通りなので、Bottom Tabs NavigatorとStack Navigatorを併用する必要がある。
その前提で進めていく。
必要なパッケージをインストールする
npm install @react-navigation/stacknpm install react-native-gesture-handlerインストール後、必要なファイルを作成する。
実装していく
mkdir srcmkdir src/stacktouch src/screens/SampleStackScreen.tsxSampleStackScreen.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.Navigator> )}
export default SampleStackScreen上記は、SampleとSampleDetailへの遷移について書かれている。
次にこれをタブナビゲーションに適応させる。
App.tsxに
<Tab.Screen name="SampleStackScreen" component={SampleStackScreen} options={{ title: 'Sample', tabBarIcon: ({ color, size }) => ( <SimpleLineIcons name="present" color={color} size={size} /> ), }}/>のように記載する。
これでタブ移動でSampleStackScreenが開けるようになった。
そしてここには一覧ページと詳細ページへの遷移が記述されているので、まず、Sampleが開く。
Sampleは、
import { NavigationProp, ParamListBase } from '@react-navigation/native'import React from 'react'import { ScrollView, View, Text, FlatList, Button } from 'react-native'
const data = [ { id: '1', text: 'アイテム 1' }, { id: '2', text: 'アイテム 2' }, { id: '3', text: 'アイテム 3' }, { id: '4', text: 'アイテム 4' }, { id: '5', text: 'アイテム 5' }, { id: '6', text: 'アイテム 6' }, { id: '7', text: 'アイテム 7' }, { id: '8', text: 'アイテム 8' }, { id: '9', text: 'アイテム 9' }, { id: '10', text: 'アイテム 10' }, { id: '11', text: 'アイテム 11' }, { id: '12', text: 'アイテム 12' }, { id: '13', text: 'アイテム 13' }, { id: '14', text: 'アイテム 14' }, { id: '15', text: 'アイテム 15' }, { id: '16', text: 'アイテム 16' }, { id: '17', text: 'アイテム 17' }, { id: '18', text: 'アイテム 18' }, { id: '19', text: 'アイテム 19' }, { id: '20', text: 'アイテム 20' },]
interface SampleProps { navigation: NavigationProp<ParamListBase> // 必要に応じて正確な型を指定する}
const Sample: React.FC<SampleProps> = ({ navigation }) => { return ( <ScrollView className="p-5"> <FlatList data={data} keyExtractor={(item) => item.id} renderItem={({ item }) => ( <View > <Text>コンテンツ {item.id}</Text> <Button title="詳細へ" onPress={() => navigation.navigate('SampleDetail', { id: item.id }) } /> </View> )} /> </ScrollView> )}
export default Sampleこんな感じにする。
そうすると、20件のカードが表示される。
そこにボタンがあり、ボタンをプレスすることでSampleDetailに遷移する。
SampleDetailは下記のように記載することで、
import { RouteProp, useRoute } from '@react-navigation/native'import React from 'react'import { ScrollView, View, Text } from 'react-native'
type ParamList = { YourScreenName: { id: number } // ここでidの型を指定する}
type RouteParams = RouteProp<ParamList, 'YourScreenName'>
const SampletDetail = () => { const route = useRoute() const id = route.params?.id return (
詳細 { id }
)}
export default SampletDetail遷移後のページでidが表示されるようになった。
