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

这是使用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中也未使用该状态... < / p>

Answer 1

React Navigation 5具有全新的基于组件的API。尽管主要概念相同，但API不同，但是您有多种选择：

使用旧的API只需很少的更改即可重复使用代码，可以使用the compatibility layer。
您可以观看this tutorial简短而具有描述性的内容。
快速而清晰地阅读the documentation。

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

1 个答案: