如何将redux信息传递到导航仪函数中？还是有其他方法可以根据传入的数据创建一个动态导航栈？

Question

所以作为一个用户，当我第一次登录时，我会被带到主页屏幕。在这个屏幕上，有这些从我们的API传回来的提示值，并被扔进Redux。这些值决定了我是否要在主屏幕上显示这些屏幕。

我创建了一个函数来基于虚数据动态地创建一个堆栈。它在我的终端工作得很好，但当我试图使用实际数据时，我意识到一个问题。我需要将这些redux值传递给我的prompt-stack.js（它是一个非react组件，所以我不能在这里使用Selector......据我所知？

所以这里是我在主屏幕上的代码的一个例子，是什么导致导航显示这个堆栈，创建堆栈的函数，以及虚数据。

import React, { useEffect } from 'react';

import { useSelector } from 'react-redux';

const Home = ({ navigation }) => {
  const { show_prompt1, show_prompt2, show_prompt3 } = useSelector(
    state => state.reducer,
  );
  useEffect(() => {
    if (show_prompt1 || show_prompt2 || show_prompt3) {
      navigation.navigate('PromptStack');
    }
  }, [show_prompt1, show_prompt2, show_prompt3]);

  return <View />;
};

// PROMPT STACK

import { Prompt1, Prompt2, Prompt3} from './screen-prompts'
import { createStackNavigator } from 'react-navigation-stack';

const dummyData = {
  show_prompt1: true,
  show_prompt2: true,
  show_prompt3: false,
};

const promptConfigs = [
  {
    id: 0,
    screenKey: 'Prompt1',
    screenName: Prompt1,
    valueToMatch: 'show_prompt1',
  },
  {
    id: 1,
    screenKey: 'Prompt2',
    screenName: Prompt2,
    valueToMatch: 'show_prompt2',
  },

  {
    id: 2,
    screenKey: 'Prompt3',
    screenName: Prompt3,
    valueToMatch: 'show_prompt3',
  },
];

const createRoutes = () => {
  let RouteConfigsObject = {};
  promptConfigs.forEach(item => {
    if (dummyData[item.valueToMatch]) {
      RouteConfigsObject = {
        ...RouteConfigsObject,
        [item.screenKey]: {
          screen: item.screenName,
        },
      };
    }
  });

  return RouteConfigsObject;
};

const RouteConfigs = createRoutes();
const initialRouteName = Object.keys(RouteConfigs)[0];

const NavigatorConfig = { initialRouteName };

const PromptStack = createStackNavigator(RouteConfigs, NavigatorConfig);

export default PromptStack;在这种情况下，我如何用redux数据代替dummy数据，或者我还能做什么来解决这个问题呢，谢谢!

我使用的是React Navigation v4 btw。

Answer 1

这在React Navigation 4中是不可能的，但在React Navigation 4中，它可以使用 import { NavigationContainer } from '@react-navigation/native'

下面是我正在做的事情。

const screenData = [
{screen: 'Prompt1', value: show_prompt1},
{screen: 'Prompt2', value: show_prompt2},
{screen: 'Prompt3', value: show_prompt3},
]

在我的useEffect中，我运行了一个forEach来检查哪些值为真，然后把它们推送到一个数组中。这个数组被保存在我的状态中。一旦完成，我就使用另一个useEffect，用它来导航到下一个屏幕。

useEffect(() => {
    if(screensStateData.length > 0){
        navigation.navigate(screenStateData[0], {screenStateData: 
        screenStateData.slice(1)})
    }
},[navigation])

我的实际代码有更多的条件，但我只是在创建一个例子，所以当我在下一个屏幕上时，我可以抓住param，做我需要做的事情，然后再次导航到： navigation.navigate(screenStateData[0]) 因为我已经从数组中删除了第一个屏幕。

我还有一些事情要做，但到目前为止，它是工作的!