React native 如何使用react navigation v5获取id的参数？

我正在尝试更新使用react navigation v4开发的应用程序

使用react navigation v4，我可以使用类似console.log（navigation.getParam（'id'））的东西获取id

但是当我在更新到react导航的v5之后尝试相同的方法时，它显示了一个错误，并且我找不到获取参数id的正确方法

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

export default function ShowScreen({ navigation }) {
  console.log(navigation.getParam('id'));

  return (
    <View style={styles.container}>
      <Text>Show Screen</Text>
    </View>
  );
}

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

从“React”导入React；
从“react native”导入{View，Text，StyleSheet}；
导出默认函数ShowScreen（{navigation}）{
console.log（navigation.getParam（'id'））；
返回(
显示屏幕
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“中心”
}
});

id所在的另一个屏幕是：

import React, { useContext } from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import { FlatList, TouchableOpacity } from 'react-native-gesture-handler';

import { Context } from '../../context/BlogContext';

import Icon from 'react-native-vector-icons/Feather'

export default function IndexScreen({ navigation }) {
  const { state, addBlogPost, deleteBlogPost } = useContext(Context);

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 30,
    justifyContent: 'center',
    alignItems: 'center'
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingHorizontal: 10,
    paddingVertical: 20,
    borderTopWidth: 1,
    borderColor: '#333'
  },
  title: {
    fontSize: 18
  },
  icon: {
    fontSize: 24
  }
});

import React，{useContext}来自“React”；
从“react native”导入{视图、文本、样式表、按钮}；
从“react native手势处理程序”导入{FlatList，TouchableOpacity}；
从“../../Context/BlogContext”导入{Context}；
从“反应本机矢量图标/羽毛”导入图标
导出默认函数索引屏幕（{navigation}）{
const{state，addBlogPost，deleteBlogPost}=useContext（Context）；
返回(
blogPost.title}
renderItem={（{item}）=>{
返回(
导航。导航（'ShowScreen'，
{id:item.id}}>
{item.title}-
{item.id}
deleteBlogPost（item.id）}>
);
}}
/>
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
玛金托普：30，
为内容辩护：“中心”，
对齐项目：“中心”
},
行：{
flexDirection:'行'，
justifyContent:'之间的空间'，
水平方向：10，
填充垂直：20，
边框宽度：1，
边框颜色：“#333”
},
标题：{
尺寸：18
},
图标：{
字体大小：24
}
});

您可以使用react navigation v5中的route.params获取参数。有关该读取的详细信息

只需将您的代码更新到此版本

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

export default function ShowScreen({ navigation,route }) {
  const {id} =route.params; //you will get id here via route

  return (
    <View style={styles.container}>
      <Text>Show Screen</Text>
    </View>
  );
}

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

从“React”导入React；
从“react native”导入{View，Text，StyleSheet}；
导出默认函数ShowScreen（{导航，路由}）{
const{id}=route.params；//您将通过route在此处获取id
返回(
显示屏幕
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“中心”
}
});

您可以像这样访问您的参数

const id = this.props.route.params.id

---

在

this.props.route.params中
您将获得所有参数：）
我没有获得该状态。find（）。什么是state.find（）？但它不能正常工作，因为id来自另一个文件，我迷路了。我试图做类似的事情，但也不能正常工作：
const{state}=useContext（Context）；const blogPost=state.find（blogPost=>blogPost.id==route.params（'id'）
@gne尝试记录this.props.route和this.props.route.params，您将知道是否有任何错误，因为我在我的项目中使用了此代码，它与navigation-v5一起工作正常