如何使用反應原生導航 v2 多次打開具有不同內容的同一個屏幕？

Question

目標是重用具有不同內容的相同屏幕 ui，並且仍然能夠使用 react native navigation v2 處理后退導航（例如 reddit 應用程序如何在您單擊它們時顯示多個用戶/提要屏幕但仍處理自定義后退導航）？

嘗試使用動態屏幕 ID 並在 state 變量中使用它們。 這種方法我還沒有走得很遠。

內置的后退按鈕處理后退導航，但考慮如下場景：

我正在處理一個表格，然后我打開另一個表格，處理它，保存它，然后必須返回到現有表格。 自定義處理程序不允許這樣做。

代碼：

主屏幕：

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>

Answer 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 })

Answer 2

如果要將go 到同屏並傳遞參數，請嘗試在當前屏幕上再次渲染當前屏幕。

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