如何在 react-navigation v5 中导航到 postId？

Question

我有一个代码示例，我试图从 react-navigation v4 更新到 react-navigation v5。 几乎一切都运行良好，除了当我点击导航到一个帖子时我无法获得它的标题，我曾经获取过 id（我已经完成了导航到 ShowScreen）然后点击它应该给出的帖子标题上的帖子标题也让我编辑它，但我什至无法获得帖子标题，现在抛出 react-navigation v5。 我的完整代码位于GITHUB而我试图导航的三个屏幕是 IndexScreen 到 ShowScreen 然后到 EditScreen

索引屏幕代码：

import React, { useContext } from 'react';
import { View, Text, StyleSheet, FlatList, Button, TouchableOpacity } from 'react-native';
import { Context } from '../../context/BlogContext';  // image context instead
import { Feather } from '@expo/vector-icons';

const IndexScreen = ({ navigation }) => {
  const { state, deleteBlogPost } = useContext(Context);

  return (
    <View style={styles.container}>
      <FlatList
        data={state}
        keyExtractor={blogPost => blogPost.title}
        renderItem={({ item }) => {
          return (
            <TouchableOpacity onPress={() => navigation.navigate('Show', { id: item.id })}>
              <View style={styles.row}>
                <Text style={styles.title}>{item.title} - {item.id}</Text>
                <TouchableOpacity>
                  <Feather style={styles.icon}
                    name="trash"
                    onPress={() => deleteBlogPost(item.id)}
                  />
                </TouchableOpacity>
              </View>
            </TouchableOpacity>
          );
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingVertical: 15,
    paddingHorizontal: 10,
    borderTopWidth: 1,
    borderBottomWidth: 1,
    borderColor: 'grey'
  },
  title: {
    fontSize: 18,
  },
  icon: {
    fontSize: 24,
    color: '#ff2222'
  },
  touchable: {
    marginLeft: 355,
  },
});

export default IndexScreen;

显示屏幕代码：

import { useNavigation } from '@react-navigation/native';
import React, { useContext } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { Context } from '../../context/BlogContext';
import { EvilIcons } from '@expo/vector-icons';

const ShowScreen = ({  route, navigation }) => {
  const { state } = useContext(Context);
  const { id } = route.params;

  const blogPost = state.find (blogPost => blogPost.id === id);

  return (
    <View>
      <View style={styles.header}>
      <TouchableOpacity> 
        <Text>{blogPost.title}</Text> 
        <Text>{blogPost.content}</Text> 
       </TouchableOpacity>
      </View>
    </View>
    // Make it goes to the right edit screen with the id of post
  );
};

const styles = StyleSheet.create({
  iconStyle: {
    marginLeft: 355,
  },
});

export default ShowScreen;

和 EditScreen 代码：

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

const EditScreen = ({ route, navigation }) => {
  const { id } = route.params;

  return (
    <View style={styles.container}>
      <Text style={styles.textStyle}>Edit, { navigation.route(id) }</Text>
    </View>
    );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  }, textStyle: {
    fontSize: 20,
  },
});

export default EditScreen;