如何使用Flatlist进行导航？

Question

我尝试通过平面列表项目导航屏幕，但没有成功。这是我的代码，出现错误。 Flatlist 有两个元素，即图像和文本，所以我想让它们用于导航到其他屏幕。我尝试了很多事情但做不到。有没有可能做到？

App.js

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Image, FlatList, Pressable } from 'react-native';
import { useNavigation } from '@react-navigation/native';


// Screens
import AracScreen from './src/screens/arac';
import ServisScreen from './src/screens/servis';
import MobilScreen from './src/screens/mobil';
import ZimmetScreen from './src/screens/zimmet';
import ToplantiScreen from './src/screens/toplanti';
import MuhaberatScreen from './src/screens/muhaberat';
import IkramScreen from './src/screens/ikram';
import UyduOfisScreen from './src/screens/uyduofis';
import BizCafeScreen from './src/screens/bizcafe';
import TimePortalScreen from './src/screens/timeportal';


// Menu
const MenuData = [
  {id:1,title:'Araç',image:require('./src/images/car.png'),screen: AracScreen},
  {id:2,title:'Servis',image:require('./src/images/bus.png'),screen: ServisScreen},
  {id:3,title:'Mobil',image:require('./src/images/mobile.png'),screen: MobilScreen},
  {id:4,title:'Zimmet',image:require('./src/images/inventory2.png'),screen:ZimmetScreen},
  {id:5,title:'Toplantı',image:require('./src/images/meeting.png'),screen:ToplantiScreen},
  {id:6,title:'Muhaberat',image:require('./src/images/cargo.png'),screen:MuhaberatScreen},
  {id:7,title:'İkram Talebi',image:require('./src/images/snacks.png'),screen:IkramScreen},
  {id:8,title:'Uydu Ofisler',image:require('./src/images/outer_office.png'),screen:UyduOfisScreen},  
  {id:9,title:'BizCafe',image:require('./src/images/bizcafe.png'),screen:BizCafeScreen},
  {id:10,title:'TimePortal',image:require('./src/images/timeportal.png'),screen:TimePortalScreen},
  {id:11,title:'İSG',image:require('./src/images/safety.png')},
  {id:12,title:'Hakkımızda',image:require('./src/images/about-us.png')},
  {id:13,title:'Öneri Talep',image:require('./src/images/request.png')},
  {id:14,title:'İstatistikler',image:require('./src/images/statics.png')},
  {id:15,title:'Duyurular',image:require('./src/images/announce.png')},
]

const renderItem = ({item}) => {

  const navigation = useNavigation();

  const handlePress = () => {
    if (item.screen) {
      navigation.navigate(item.screen);
    } else {
      console.log("Hedef ekran belirtilmemiş.");
    }
  };

  return (
    <View style={styles.item}>
      <Pressable onPress={handlePress}>
        <Image source={item.image} style={styles.image}/>
        <Text style={styles.text}>{item.title}</Text>
      </Pressable>
    </View>
  )
};


export default function App() {
  
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Image source={require('./src/images/logo-id.png')} style={{width:242, height:73, borderWidth:0}} alt='İdari İşler Dijital Platformu'/>
      </View>

      <View style={styles.body}>
          <View style={styles.appmenu}>
            <FlatList
              data={MenuData}
              numColumns={3}
              renderItem={renderItem}
              keyExtractor={(item) => item.id.toString()}
            />
          </View>
      </View>

      <View style={styles.footer}>
        <Image source={require('./src/images/app-footer.png')} style={{width:100, height:40, borderWidth:0}} alt='Doğuş Teknoloji'/>
      </View>


      <StatusBar style="auto" />
    </View>
  );  
}

错误

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.

提前致谢。

Answer 1

我认为这是因为你需要将

renderItem

函数移到

App

函数内，因为

useNavigation

不允许在 React 组件之外使用：

export default function App() {

    const renderItem = ({item}) => {
    
      const navigation = useNavigation();
    
      const handlePress = () => {
        if (item.screen) {
          navigation.navigate(item.screen);
        } else {
          console.log("Hedef ekran belirtilmemiş.");
        }
      };
    
      return (
        <View style={styles.item}>
          <Pressable onPress={handlePress}>
            <Image source={item.image} style={styles.image}/>
            <Text style={styles.text}>{item.title}</Text>
          </Pressable>
        </View>
      )
    };
  
    return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Image source={require('./src/images/logo-id.png')} style={{width:242, height:73, borderWidth:0}} alt='İdari İşler Dijital Platformu'/>
      </View>
    
      <View style={styles.body}>
          <View style={styles.appmenu}>
            <FlatList
              data={MenuData}
              numColumns={3}
              renderItem={renderItem}
              keyExtractor={(item) => item.id.toString()}
            />
          </View>
      </View>
    
      <View style={styles.footer}>
        <Image source={require('./src/images/app-footer.png')} style={{width:100, height:40, borderWidth:0}} alt='Doğuş Teknoloji'/>
      </View>
    
    
      <StatusBar style="auto" />
    </View>
    );  
}