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

Question

我对在 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，文档显示了不同的方式，但我我不确定如何在我的两个不同屏幕上使用它

这是参数id所在的屏幕上下文，使用react-navigation v4:

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 },
  []
);

我不知道将用户从 post 发送到使用相同 ID 生成的正确屏幕的正确方法是什么，但我知道反应中也没有使用状态-导航 v5...

Answer 1

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

重复使用旧的 API 代码并进行最小的更改，您可以使用 the compatibility layer。
您可以观看 this tutorial 它简短且具有描述性。
阅读the documentation，因为它快速而清晰。

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

React-native, passing a param through navigation v4 to navigation v5

react-native

react-navigation

react-props

react-navigation-v5