React native 反应本机,通过导航v4将参数传递给导航v5

React native 反应本机,通过导航v4将参数传递给导航v5,react-native,react-navigation,react-props,react-navigation-v5,React Native,React Navigation,React Props,React Navigation V5,我只知道一点关于在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 '../../con

我只知道一点关于在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'
  }
});
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 navigation 5有一个全新的基于组件的API。虽然主要概念相同,但API不同,您有多个选项:

  • 使用旧的API重用代码,只需进行最小的更改,您可以使用
  • 你可以看它简短而生动
  • 阅读,因为它快速而清晰