如何在 React Native 中添加可點擊的 FlatList 項並導航到 Detail 組件

Question

我有一個 FlatList 顯示在主屏幕上，單擊一個 FlatList 項目我想導航到 Detail 組件並將相關數據傳遞給 detail 組件。由於我是新手，但我已經實現了本機反應，但我正在努力實現此功能主屏幕上的 FlatList。FlatList 已在list.js組件下實現，我想從這個組件導航到details.js組件。

下面是我的代碼：

應用程序.js

import React from 'react';
import {StatusBar, StyleSheet} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import List from './components/list';
import Detail from './components/details';

const Stack = createStackNavigator();

const App = () => {

return (
  
  <NavigationContainer>
  <StatusBar barStyle="dark-content" backgroundColor="#8E24AA"/>
  <Stack.Navigator>
    <Stack.Screen 
    name="Home" 
    component={List}
    options={{ 
      headerStyle: {
        backgroundColor: '#AB47BC',
      },
      headerTintColor: '#fff' }} />

    <Stack.Screen 
    name="Detail" 
    component={Detail}
    options={{ 
      headerStyle: {
        backgroundColor: '#AB47BC',
      },
      headerTintColor: '#fff' }} />  
  </Stack.Navigator>
 </NavigationContainer>   

  ) 
}

export default App;

列表.js

import React, {useEffect,useState} from 'react';
import {View,Text,StyleSheet,ActivityIndicator,FlatList} from 'react-native';

const List = () => {

 const[post,setPost] = useState([]);
 const[isLoading,setLoading] = useState(true);

 useEffect(() => {
    
    const url = 'http://api.duckduckgo.com/?q=simpsons+characters&format=json';
    fetch(url).then((res) => res.json())
    .then((resp) => {
        setPost(resp.RelatedTopics);
        setLoading(false);
    }).catch((err) => alert(err));
 },[]);

 const FlatListItemSeparator = () => {
  return (
   <View
    style={{  
      height: 0.7,
      width: "100%",
      backgroundColor: "#adadad"
     }}
   />
  );
}

    return(
 
       <View style={{flex:1,justifyContent:'center'}}>

        { isLoading ? <ActivityIndicator color="#8E24AA" size="large"/> : <FlatList 
            data = {post} 
            keyExtractor = {(item) => item.FirstURL} 
            renderItem = {({item}) => <Text style={styles.my}>{item.Text}</Text>} 
            ItemSeparatorComponent = { FlatListItemSeparator }/>  }
      
      </View>
    );
};

const styles = StyleSheet.create({
  my:{
     marginBottom: 15,
     marginTop: 15,
     marginLeft: 15
   }
});

export default List;

細節.js

import React from 'react';
import {View,Text} from 'react-native';

const Detail = () => {

    return(
      <View>
          <Text>Hello there</Text>
      </View>
    );
};

export default Detail;

有人讓我知道如何實現所需的功能。

Answer 1

您可以添加一個 TouchableOpacity，將您的 Text 組件包裝在 renderItem 中。 將 function 添加到 onPress 然后獲取導航道具並導航到詳細信息屏幕，傳遞項目。 您可以通過 Detail 屏幕中的 route 屬性訪問這些數據。

    const handlePress = (item) => {
       navigation.navigate('Detail', item);
    }

    <TouchableOpacity onPress={() => {
      handlePress(item);
    }>
      <Text style={styles.my}>{item.Text}</Text>
    </TouchableOpacity>


In Detail, add the following code.

    const Detail = ({navigation, route}) => {
      const {Text} = route.params
      return (
        <View>
          <Text>{Text}</Text>
        </View>
      );
    };

Answer 2

Navigator 中定義的每個屏幕都會收到一個名為navigation的道具，該道具具有鏈接到其他屏幕的各種方法。

1. 更新List組件定義以使用道具navigation

const List = ({navigation}) => {
...

2. 使用 navigation.navigate 到 go 到 Detail 屏幕：

 //Add an onPress event handler 
 renderItem={({item}) => (
   <Text onPress={navigateToDetails} style={styles.my}>
    {item.Text}
   </Text>
 )}

使用在Stack.Navigator中定義的帶有屏幕名稱的navigation.navigate （即Detail ）導航到 Detail 屏幕。

const navigateToDetails = () => {
  navigation.navigate('Detail');
};

3. 要將參數傳遞到詳細信息屏幕，請將它們放在 object 作為導航的第二個參數。導航 function： navigation.navigate('RouteName', { /* params go here */ })

更新 onPress Function 以通過項目

  renderItem={({item}) => (
    <Text onPress={() => navigateToDetails(item)} style={styles.my}>
      {item.Text}
    </Text>
  )}

 // Update function definition to

  const navigateToDetails = item => {
    navigation.navigate('Detail', item);
  };

4. 要訪問Detail屏幕中的參數，請閱讀屏幕組件中的參數： route.params

const Detail = ({navigation, route}) => {
  return (
    <View>
      <Text>Hello there {route.params.Text}</Text>
    </View>
  );
};

有關導航的更多詳細信息： 這里

Answer 3

首先，您需要在列表組件上獲取navigation prop

const List = ({navigation}) => { //<====

然后您可以使用navigation並像這樣傳遞數據

 renderItem = {({item}) => <Text onPress={()=>navigation.navigate("Detail",{item})} style={styles.my}>{item.Text}</Text>} 

並像這樣在Detail屏幕上獲取您的數據

import React from 'react';
import {View,Text} from 'react-native';

const Detail = ({route}) => {
    const {item}=route.params

    console.log("data is =>",item)
    return(
      <View>
          <Text>Hello there</Text>
      </View>
    );
};

export default Detail;