如何使用反应原生导航 v2 多次打开具有不同内容的同一个屏幕？答案

【问题标题】：How do i open the same screen multiple times with different content using react native navigation v2?如何使用反应原生导航 v2 多次打开具有不同内容的同一个屏幕？
【发布时间】：2019-09-30 06:28:29
【问题描述】：

目标是重用具有不同内容的相同屏幕 ui，并且仍然能够使用 react native 处理返回导航（例如 reddit 应用程序如何在您单击它们时显示多个用户/提要屏幕但仍处理自定义返回导航）导航 v2？

尝试使用动态屏幕 ID 并在状态变量中使用它们。这种方法我还没有走多远。

内置的后退按钮处理后退导航，但考虑如下场景：

我正在处理一个表格，我打开另一个表格，处理它，保存它，然后必须返回到现有表格。自定义处理程序不允许这样做。

代码：

主屏幕：

Navigation.push(this.props.componentId, {
  component: {
    name: 'example.formScreen',
    passProps: {
      data: some props
    },
    options: {
      topBar: {
        title: {
          text: 'form Screen'
        }
      }
    }
  }
});

在表单屏幕中：

<View>
<Button 
title="save form"
onpress = ()=>{
Navigation.push(this.props.componentId, {
      component: {
        name: 'example.formScreen',
        passProps: {
          data: some other props
        },
        options: {
          topBar: {
            title: {
              text: 'form Screen'
            }
          }
        }
      }
    });
}/>
<Button
title="go back"
onPress={()=>Navigation.pop(this.props.componentID)}
/>
</View>

【问题讨论】：

标签： react-native wix-react-native-navigation react-native-navigation-v2

【解决方案1】：

您可以通过这种方式推送而不是导航到屏幕，您可以使用具有不同数据的相同组件，并且可以使用相同的屏幕。在导航到屏幕时，您必须将参数与导航路线一起传递，这些参数将包含有助于在新屏幕上填充容器的数据。上面的示例在我们使用 react-navigation 时使用，但在此示例中，我将解释两者（react-native-navigation，react-navigation）来传递参数，并且后退按钮的功能将与您可以弹出的功能相同以前的路线将导航回来。

react-native-navigation

Navigation.push(this.props.componentId, {
  component: {
    name: "ShowAnotherScreen",
    passProps: {
     data: item
    }
  }
})

react-navigation

this.props.navigation.push('YourScreenName', { YourParams })

【讨论】：

自定义后手柄在这种情况下不起作用，即 Navigation.pop();
@ShreevatsaAcharya 您是要覆盖后退按钮功能还是只想导航到后屏幕？
对于某些情况下我会尝试处理返回功能，我已经更新了问题，希望您能更好地指导我。
你能分享你的代码吗，我明白了，但我想看看你已经实现的代码以及你面临的问题，所以我可以更好地指导你。
@ShreevatsaAcharya 我也看到了您报告的问题github.com/wix/react-native-navigation/issues/5532，据我了解，您使用不同的数据打开同一个屏幕两到三次，例如您想要打开嵌套屏幕，如果在这种情况下，您只需要定义一个路由，而不是多次打开它，为您想要填充的屏幕部分创建一个静态 UI 组件，每个屏幕上的数据都不同，打开该视图时使用不同的数据。

【解决方案2】：

如果你想去同一个屏幕并传递参数，尝试在当前屏幕上再次渲染当前屏幕。

this.props.navigation.push('currentscreen',{param: "params"})

【讨论】：

@ShreevatsaAcharya 它与版本 2 相同。
testid 在 v2 中已被删除，我正在尝试使用动态屏幕 id 和屏幕寄存器