react-native - 如何将数据传递到详细信息屏幕？我正在尝试，但它给了我这个错误：无效尝试解构不可迭代实例

问题描述

主屏幕：

import React from 'react';
import {View,Text, Image,StyleSheet,TouchableOpacity} from 'react-native';
import {useNavigation} from '@react-navigation/native';

export default function Books({item}){
    const firstUrl= 'https://carp-kenya.herokuapp.com';
    var secondUrl= String(item.imageFile) ;   
    var urls= String (firstUrl+secondUrl);
    const navigation = useNavigation();
    const{Title,description,File}=item;

    return (
        <View style={styles.container1}>
            <TouchableOpacity onPress={()=>navigation.navigate('DetailsScreen',{file:File,Description: description,Title:Title})} >
                <Image style={styles.image} source={{uri: urls}}/>
                <View style={styles.view2}>
                    <Text style={styles.title}> {Title}</Text>
                </View>
            </TouchableOpacity>
        </View>
    )
}

源屏幕：-

import React,{useEffect,useState,useCallback} from 'react';
import {View, TouchableOpacity, Text, StyleSheet, SafeAreaView, FlatList, ActivityIndicator, Alert, ScrollView} from 'react-native';
import Books from '../resources/bookSource';
import {useNavigation} from '@react-navigation/native'

export default function RegistrationScreen({item}){

    const [isLoading, setLoading] = useState(false);
    const [user, setUser] = useState([]);
    const [cat, setCat] = useState([]);
    const [text,setText]=useState("");
    const [ref, setRef]= useState([])
    const [refreshing, setRefreshing] = useState(false);

    const navigation = useNavigation();  
    const ActionNav =()=>{searchData('action')}
    const DramaNav =()=>{searchData('drama')}
    const InspirationalNav =()=>{searchData('inspirational')}
    const EducationalNav =()=>{searchData('educational')}

    useEffect(()=>{
        fetchData()
    },[])

    const fetchData = () => {
        setLoading(true);
        fetch('https://carp-kenya.herokuapp.com/book_json_format/')
          .then((response) => response.json())
          .then((json) =>{setUser(json),
            (setCat(json)),
            (setRef(json)) })
          .catch(() => Alert.alert('Something went wrong..', 'There was an error.'))
          .finally(() => {
            setLoading(false)
          });
    }

    const searchData = (text) => {
        const newData = cat.filter((item) => {
          const itemData = item.category.toUpperCase();
          const textData = text.toUpperCase();
          return itemData.indexOf(textData) > -1;
        });
        setUser(newData);
        setText(text);
      }
    const onRefresh = useCallback(() => {
        setRefreshing(true);
        fetch('https://carp-kenya.herokuapp.com/book_json_format/')
          .then((response) => response.json())
          .then((json) =>setUser(json))
          .catch(() => Alert.alert('Something went wrong..', 'There was an error.'))
          .finally(() => {
            setRefreshing(false)
          });
    }, []);
    

    return(
        <SafeAreaView >
            <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
                <View style={styles.container}>
                    <TouchableOpacity style={styles.category} onPress={InspirationalNav}>
                        <Text style={styles.text}>Inspirational</Text>
                    </TouchableOpacity>

                    <TouchableOpacity style={styles.category} onPress={EducationalNav}>
                        <Text style={styles.text}>Educative</Text>
                    </TouchableOpacity>

                    <TouchableOpacity style={styles.category} onPress={DramaNav} >
                        <Text style={styles.text}>Drama</Text>
                    </TouchableOpacity>

                    <TouchableOpacity style={styles.category} onPress={ActionNav}>
                        <Text style={styles.text}>Action</Text>
                    </TouchableOpacity>
                </View>
            </ScrollView>
            {isLoading ? <ActivityIndicator style={styles.containers}/> :
                <FlatList
                    data={user}
                    showsHorizontalScrollIndicator={false}
                    keyExtractor={({ id }, index) => id}
                    renderItem={( {item }) => (<Books item={item} />)
                    }
                    numColumns={3}
                    onRefresh={()=>onRefresh()}
                    refreshing={refreshing}
                />
            }
        </SafeAreaView>
    );

标签： react-native

react-native - 如何将数据传递到详细信息屏幕？我正在尝试，但它给了我这个错误：无效尝试解构不可迭代实例

问题描述

解决方案

推荐阅读