🏄‍♂️

React Native & ChatGPT モバイルアプリ開発(5)

2024/02/16に公開

Android

スレッド一覧画面

スレッド一覧画面を作成して板一覧画面(BoardListScreen)から遷移します。

onPressでitemを渡してThreadListScreenに遷移してください。ThreadListScreenはスレッド一覧画面ですが、まずは渡されたitemの内容を画面に表示してください。
TS2339: Property 'navigation' does not exist on type 'BoardListScreenProps'.というエラーが発生します。エラーが発生しないように現在のBoardListScreen.tsxに組み込んでください。
onPress={() => navigation.navigate()でTS2345というエラーが発生しています。CategoryListScreen.tsxではRootStackParamListのなかにBoardListを定義しているためエラーが発生していないようです。ThreadListScreenへの遷移でもThreadListをRootStackParamListの中に作成した方がよいのではないですか？

少し具体的に教えすぎたかもしれません。ここまで書かなくても推測してくれそうに思います。

TS6133: 'CategoryContent' is declared but its value is never read.という警告が発生しています。
TS2322というエラーが発生しています。
現在のThreadListScreen.tsxにマージしてください。

新しいファイルを作成し、既存の2ファイルを修正しているとなかなか整合性を取るのが難しいようです。これでようやくすべてのファイルでエラーや警告が解消されました。

修正行数としてはそれほど多くありませんが、他のページのことや別のファイルで定義しているデータタイプのことをきちんと伝えないとコピペできるように書いてもらうのは難しいですね。

--- a/App.tsx
+++ b/App.tsx
@@ -7,6 +7,7 @@ import { createStackNavigator, CardStyleInterpolators } from '@react-navigation/
 import CategoryListScreen from './CategoryListScreen';
 import BoardListScreen from './BoardListScreen';
 import { RootStackParamList } from './types';
+import ThreadListScreen from './ThreadListScreen.tsx';
 
 const Stack = createStackNavigator<RootStackParamList>();
 
@@ -31,6 +32,7 @@ const App = () => {
             cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS, // iOSスタイルの遷移アニメーション
           }}
         />
+        <Stack.Screen name="ThreadList" component={ThreadListScreen} />
       </Stack.Navigator>
     </NavigationContainer>
   );

--- a/BoardListScreen.tsx
+++ b/BoardListScreen.tsx
@@ -2,25 +2,26 @@
 
 import React from 'react';
 import { View, FlatList, StyleSheet } from 'react-native';
-import { RouteProp } from '@react-navigation/native';
+import { RouteProp, useNavigation } from '@react-navigation/native';
+import { StackNavigationProp } from '@react-navigation/stack';
 import GridItem from './GridItem';
 import { RootStackParamList } from './types';
 
 type BoardListScreenRouteProp = RouteProp<RootStackParamList, 'BoardList'>;
+// navigation プロパティの型を追加
+type BoardListScreenNavigationProp = StackNavigationProp<RootStackParamList, 'BoardList'>;
 
 interface BoardListScreenProps {
   route: BoardListScreenRouteProp;
+  // navigation プロパティを追加
+  navigation: BoardListScreenNavigationProp;
 }
 
+// useNavigation フックを使用して、navigation オブジェクトを取得
 const BoardListScreen: React.FC<BoardListScreenProps> = ({ route }) => {
+  const navigation = useNavigation<BoardListScreenNavigationProp>();
   const { categoryContent } = route.params;
 
-  // GridItemのonPressプロパティに渡すダミー関数
-  // 実際のアプリでは、適切なアクションを実装してください
-  const handlePress = () => {
-    console.log('Item pressed');
-  };
-
   return (
     <View style={styles.container}>
       <FlatList
@@ -30,7 +31,7 @@ const BoardListScreen: React.FC<BoardListScreenProps> = ({ route }) => {
             name={item.board_name}
             isFirstRow={index < 2} // 最初の2アイテムで最初の行
             isLeftCell={index % 2 === 0} // 偶数インデックスが左側のセル
-            onPress={handlePress} // 実際には適切な処理を実装する
+            onPress={() => navigation.navigate('ThreadList', { item })}
           />
         )}
         keyExtractor={(_, index) => `board-${index}`}

--- a/types.ts
+++ b/types.ts
@@ -28,4 +28,5 @@ export interface BbsMenu {
 export type RootStackParamList = {
   CategoryList: undefined; // 他のスクリーンの定義があればここに追加
   BoardList: { categoryContent: CategoryContent[] }; // 必要に応じて型を修正
+  ThreadList: { item: CategoryContent }; // ThreadListへの遷移に必要なパラメー
タの型を追加
 };

そしてこれが追加してもらったスレッド一覧画面のコード。

// ThreadListScreen.tsx

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { RouteProp } from '@react-navigation/native'; // RoutePropのインポート
import { RootStackParamList } from './types'; // RootStackParamListのインポート

// RootStackParamListを使用してThreadListScreenのroute propの型を定義
type ThreadListScreenRouteProp = RouteProp<RootStackParamList, 'ThreadList'>;

interface ThreadListScreenProps {
  route: ThreadListScreenRouteProp;
}

const ThreadListScreen: React.FC<ThreadListScreenProps> = ({ route }) => {
  // paramsからitemを直接取り出す
  const { item } = route.params;

  return (
    <View style={styles.container}>
      <Text>Board Name: {item.board_name}</Text>
      <Text>URL: {item.url}</Text>
      {/* 必要に応じて他のitemプロパティを表示 */}
    </View>
  );
};

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

export default ThreadListScreen;

今日はスレッド一覧画面へ遷移して板名とURLの表示までとなりました。次はスレッド名を一覧表示したいと思います。

ここまでのソースコードです。

続きはこちら。

Flutter版はこちら。

スレッド一覧画面

Discussion