React-native，通过导航 v4 将参数传递给导航 v5答案

【问题标题】：React-native, passing a param through navigation v4 to navigation v5React-native，通过导航 v4 将参数传递给导航 v5
【发布时间】：2021-01-04 18:52:00
【问题描述】：

我对在 react-navigation v5 中获取参数知之甚少，然后我想知道如何将这个文件“ShowScreen.js v4 转换为 ShowScreen.js v5”

这是我使用 react-navigation v4 的文件：

import React, { useContext } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Context } from '../../context/BlogContext';

export default function ShowScreen({ navigation }) {
  const { state } = useContext(Context);

  const blogPost = state.find(
    blogPost.id === navigation,getParams('id')
  );

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

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

但我知道，如果我想使用 react-navigation v5 之类的东西，我需要以新的方式更改它，因为 react-navigation v5 中没有 getParam，文档显示了不同的方式，但我不知道如何在两个不同的屏幕上使用它

这是使用 react-navigation v4 设置参数 id 所在的屏幕上下文：

import createDataContext from './createDataContext';

const blogReducer = (state, action) => {
  switch (action.type) {
    case 'delete_blogpost':
      return state.filter(blogPost => blogPost.id !== action.payload);
    case 'add_blogpost':
      return [
        ...state,
        {
          id: Math.floor(Math.random() * 99999),
          title: `Blog Post #${state.length + 1}`
        }
      ];
    default:
      return state;
  }
};

const addBlogPost = dispatch => {
  return () => {
    dispatch({ type: 'add_blogpost' });
  };
};
const deleteBlogPost = dispatch => {
  return id => {
    dispatch({ type: 'delete_blogpost', payload: id });
  };
};

export const { Context, Provider } = createDataContext(
  blogReducer,
  { addBlogPost, deleteBlogPost },
  []
);

我不知道将用户从生成的 id 的帖子发送到使用相同 id 生成的正确屏幕的正确方法是什么，但我知道在 react-navigation v5 中也没有使用该状态...

【问题讨论】：

标签： react-native react-navigation react-props react-navigation-v5

【解决方案1】：

React Navigation 5 有一个全新的基于组件的 API。虽然主要概念相同，但 API 不同，您有多种选择：

使用旧 API 重用代码，只需进行少量更改，您可以使用 the compatibility layer。
您可以观看 this tutorial 简短且具有描述性的内容。
阅读the documentation，它既快速又清晰。

【讨论】：