reactjs - 如何将 redux 信息传递给导航器函数？或者是否有不同的方法来创建基于传入数据的动态导航堆栈？

Question

因此，作为用户，当我第一次登录时，我会被带到 HomeScreen。在这个屏幕上，有这些提示值从我们的 API 返回并输入到 Redux。这些值决定了我是否要在主屏幕上显示这些屏幕。

我创建了一个函数来根据虚拟数据动态创建堆栈。它对我来说工作正常，但是当我尝试使用实际数据时我意识到了一个问题。我需要将这些 redux 值传递给我的 prompt-stack.js （这是一个非反应组件，所以我不能在这里使用 useSelector ......据我所知？）

下面是我在主屏幕上的代码示例，是什么导致导航显示此堆栈、创建堆栈的函数以及虚拟数据。

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);

导出默认 PromptStack；在这种情况下，我将如何用 redux 数据替换虚拟数据，或者我还能做些什么来解决这个问题？谢谢！

我正在使用 React Navigation v4 顺便说一句

标签： reactjsreact-nativereduxreact-navigation

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])

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

我还有一些事情要做，但到目前为止它还在工作！