過去に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.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が表示されるようになった。