2

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

尝试使用动态屏幕 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>
4

2 回答 2

3

您可以通过这种方式推送而不是导航到屏幕，您可以使用具有不同数据的相同组件并且可以使用相同的屏幕。在导航到屏幕时，您必须将参数与导航路线一起传递，这些参数将包含有助于在新屏幕上填充容器的数据。上面的示例在我们使用 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 })
于 2019-09-30T07:02:53.143 回答
2

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

this.props.navigation.push('currentscreen',{param: "params"})
于 2019-09-30T07:03:36.140 回答