导航后保持屏幕状态

Question

我有一个像这样的导航器：

<NavigationContainer>
        <Stack.Navigator>
            <Stack.Screen name="Home" component={HomeScreen} />
            <Stack.Screen name="Support" component={SupportScreen} />
        </Stack.Navigator>
 </NavigationContainer>

HomeScreen 和 SupportScreen 在它们的函数中都只有一个组件呈现。 我希望每个屏幕都保留内容，但它对我不起作用 这是步骤：

1. 导航器在主屏幕上加载
2. 我在 Home 的 TextInput 中输入“abc”
3. 导航到 SupportScreen
4. 在 Support 的 TextInput 中键入“xyz”
5. 返回/导航到主页
6. 我可以在输入中看到“abc”
7. 导航到支持
8. 输入为空

我希望 Support 的 TextInput 将文本保留在输入中

如果我交换

<Stack.Screen name="Home" component={HomeScreen} />

和

<Stack.Screen name="Support" component={SupportScreen} />

，那么会发生完全相同的情况，但是 Home 会丢失他的文本而 Support 不会，所以我认为这种行为与初始屏幕或类似的东西有关......

你能向我解释一下这种行为以及如何让它按照我的预期工作吗？ 谢谢！

Answer 1

这是常见问题。为了解决这个问题，我们可以在每次在屏幕之间导航时发送现有的路线数据，查看下面的代码我已经为你完成了

https://snack.expo.dev/@mainak-shil/stack-nav__persist-route-data-between-screens

Answer 2

React Navigation 中你需要知道的 3 个动作

推（），导航（），返回（）

'push' 将在导航堆栈的顶部添加另一个新屏幕，无论堆栈中是否存在相同的屏幕。

如果存在相同的屏幕，“导航”将切换到堆栈中的屏幕，否则它将像“推”一样工作。

'goBack' 会将屏幕从导航堆栈中弹出，这意味着屏幕将被卸载并且组件中的所有数据都将丢失。

在您的情况下，“支持”屏幕已初始化，因为您有返回导航。如果您直接导航到“主页”并返回到“支持”，您可以在其中保留之前的组件状态。 （实际上'goBack'是'navigate'的反向动作，'pop'是'push'的反向动作。）