如何在 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;