如何在React Navigation中最好地实现父子回调

Question

[我正在使用的应用程序中有一个包含“项目选择器”的表单，该表单会在新屏幕上推送以选择项目（通过堆栈导航器，这是两个屏幕的父组件）。我真正需要的只是让“孩子”（项目选择器）告诉“父母”（窗体）选择了哪个项目。

根据react-navigation文档，似乎有几种明智的方法：

• 使用减速器。我可以使用dispatch设置所选项目，但是这样会将“所选项目”状态一直移动到“主”屏幕。为什么？因为子屏幕不是表单屏幕的子视图，所以它是navigation的子视图，它在表单上方。理想情况下，作为一个很好的关注点分离，表单将保持其自身状态，并且仅将完成的表单/对象告知主屏幕。因此，这不是理想的解决方案。
• 将项目作为参数“传递”给表单。在这种情况下，窗体具有selectedItem: Item|undefined属性。这对我也有代码味。一方面，子屏幕必须对表单屏幕（navigation.navigate('FormScreen', { selectedItem: item })）进行硬编码。

我当前的解决方案是将onSelectItem参数分配给项目选择器。我喜欢这种解决方案，因为它使子屏幕变得通用。我可以在任何“父”上使用它，而我要做的就是处理它和回调。但是此解决方案会发出有关不可序列化参数的警告。

理想情况下，我将从表单屏幕上使用状态/缩减器，但我想不出任何办法使在父级中创建的缩减器对孩子可用，因为两者实际上都是导航器的孩子。

还有其他解决方案在这里起作用，还是一种使用方式？

（btw我还考虑过在表单屏幕内使用另一个嵌套的堆栈导航–在我的情况下，这实际上是可行的，因为我没有使用系统导航标题，但总的来说感觉不正确。类似地，我可以使用一个模式弹出窗口而不是将视图推送到堆栈上，但这会大大改变UI，我不想在这里做。此外，作为练习，我认为那里可能有更好的解决方案）。

[像往常一样，我不是在寻找“自行车脱落”解决方案–我想知道是否有一种更优雅的方法来使屏幕更深地向下传送到堆栈上。

在iOS / Swift代码中，我将创建一个委托协议并让其父级实现它，并让子级通过其委托人上的方法设置所选项目，我正在寻找类似于该模式的东西。

Answer 1

此答案假设您只想将picker与包含Form的堆栈一起使用

我会建议使用Context和堆栈中的一些条件语句进行局部状态管理

function FormStack({ navigation, route }){
    return(
     <PickContext.Provider value={pickContext}>
            <Stack.Navigator>
              {state.choice == null && state.isShowing == false ? (
                <Stack.Screen name="Form" component={FormScreen} />
              ) : (
                <Stack.Screen name="Picker" component={PickerScreen} />
              )}
            </Stack.Navigator>
          </PickContext.Provider>
);}

您不需要创建单独的堆栈，而是在同一堆栈上应用条件来显示或隐藏，基于state。