点击 Firebase 数据和 React Native 获取 List 项信息

Question

我正在努力用 React Native 和 firebase/firestore 做应用程序，我还在学习。

当我单击列表中的卡片/项目时，我想打开一个新屏幕，并且我单击的项目显示有关此项目的更多具体信息。 所以这是我的listingScreen，它正在工作并从firebase/firestore获取数据：

export default function listingScreen({ navigation }) {
    
  const [entities, setEntities] = useState([])
  const entityRef = firebase.firestore().collection('entities');
  const [loading, setLoading] = useState(true)

  
  useEffect(() => {
      entityRef
          .orderBy('createdAt', 'desc')
          .onSnapshot(
              querySnapshot => {
                  const newEntities = []
                  querySnapshot.forEach(doc => {
                      const entity = doc.data()
                      entity.id = doc.id
                      newEntities.push(entity)
                  });
                  setEntities(newEntities)
                  setLoading(false)
              },
              error => {
                  console.log(error)
                  setLoading(false)
              }
          );
          
  }, [])


  const renderEntity = ({item}) => {
      return (
              <Card
              title={item.text}
              subTitle={item.description}
              onPress={() => navigation.navigate(routes.LISTING_DETAILS, item)}
              >
                  {item.text} - 
                  {item.category} - 
                  {item.location} - 
                  {item.description}
              </Card>
      )
  }
  
  return (
    <Screen style={styles.screen}>
        <View style={styles.header}>
          <AppLogo/> 
        </View>
      
      <View style={styles.container}>
          { entities && (
              <View style={styles.listContainer}>
                  <FlatList
                      data={entities}
                      renderItem={renderEntity}
                      keyExtractor={(item) => item.id}
                      removeClippedSubviews={true}
                      
                  />
              </View>
          )}
          
      </View>
    </Screen>
      
  )
  
}

所以 onPress 在 Card 组件上，导航被发送到这个屏幕，但我想获取我点击的这个特定项目的数据。我该怎么做？

function ListingDetailsScreen({navigation}) {
  

return (
    <View>
      
      <View style={styles.detailsContainer}>
        <Text style={styles.title}>Test</Text>
        <Text style={styles.description}>Description</Text>
        <Image style={styles.image}
        tint="light"
        source={require('../assets/bateau.jpg')} />
        <View style={styles.userContainer}>
        <FlatList
                    data={   }             //I don't know what data should I put and keyExtractor
                    keyExtractor={    }
                    ItemSeparatorComponent={ListItemSeparatorComponent}
                    renderItem={({item }) => 
                        <ListItem
                        
                            title={item.title}
                            subTitle={item.subTitle}
                            IconComponent={
                                <Icon 
                                    name={item.icon.name} 
                                    backgroundColor={item.icon.backgroundColor}
                                />
                            }
                        />
                    }
                />
        </View>
      </View>
      
    </View>
  );
}

非常感谢

Answer 1

在名为item的组件中使用route.params：

const {item} = route.params;

在您的组件中导入useNavigation from "@react-navigation/core" 或查看此Passing parameters to routes 文档了解更多信息。