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

Question

The objective is to reuse the same screen ui with different content and still be able to handle back navigation(like how reddit app can show multiple user/feed screens as you click on them but still handle custom back navigation) using react native navigation v2?

trying to use dynamic screen id's and use them in state variables. I haven't come very far with this approach.

The inbuilt back button handles back navigation but consider the scenario as follows:

I am working on a form and I open another form, work on it, save it and have to return to the existing form. custom handlers do not allow it.

CODE:

HomeScreen:

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

in 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>

Answer 1

You can push instead of navigating to the screen in this way you can use same component with different data and can use the same screen. You have to pass params along with navigation route while navigating to the screen and these params will have the data that will help to fill the container on the new screen. The above Example is used when we are using react-navigation but in this example, I will explain about both(react-native-navigation, react-navigation) to pass params and the back button functionality will be the same as you can pop the previous route will navigating back.

react-native-navigation

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

react-navigation

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

Answer 2

If you want to go to the same screen and pass on the parameters, try rendering the current screen again on the current screen.

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