React Navigation切换页面后非初始屏幕状态丢失问题及解决方法咨询

问题场景 #

使用如下栈导航代码：

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

其中HomeScreen和SupportScreen仅渲染一个TextInput组件。操作后出现以下现象：

• 加载导航器，在Home的输入框输入abc，导航到SupportScreen并输入xyz
• 返回Home后，输入框仍显示abc，但再次进入SupportScreen时，输入框内容为空
• 交换两个Stack.Screen的顺序后，会出现相反情况：Home的输入内容丢失，Support的内容保留

问题原因 #

这是React Navigation栈导航的默认行为导致的：

• 栈导航的**初始屏幕（栈底屏幕）**会被持续保留在内存中，不会被卸载，因此其组件状态会一直维持
• 当你从初始屏幕导航到其他屏幕（栈顶屏幕），再返回初始屏幕时，栈顶的屏幕会被卸载销毁，再次进入该屏幕时会重新创建组件实例，之前的输入状态自然丢失
• 交换屏幕顺序后，新的初始屏幕变为栈底，会被保留，原来的初始屏幕则变为栈顶，返回时会被卸载，因此状态丢失的对象互换

解决办法 #

方法1：禁用屏幕失焦卸载（最简单直接） #

给需要保留状态的Stack.Screen设置unmountOnBlur: false，让屏幕在失去焦点时不被卸载，从而保留组件状态：

<Stack.Navigator>
  <Stack.Screen 
    name="Home" 
    component={HomeScreen} 
    options={{ unmountOnBlur: false }}
  />
  <Stack.Screen 
    name="Support" 
    component={SupportScreen} 
    options={{ unmountOnBlur: false }}
  />
</Stack.Navigator>

方法2：全局状态管理（适合复杂场景） #

通过全局状态容器（如Context API、Redux）存储输入框的值，脱离组件自身状态，即使组件卸载，数据也能保留：

示例（Context API）

1. 创建输入状态Context：

import { createContext, useContext, useState } from 'react';

const InputContext = createContext();

export function InputProvider({ children }) {
  const [homeInput, setHomeInput] = useState('');
  const [supportInput, setSupportInput] = useState('');

  return (
    <InputContext.Provider 
      value={{ homeInput, setHomeInput, supportInput, setSupportInput }}
    >
      {children}
    </InputContext.Provider>
  );
}

export function useInput() {
  return useContext(InputContext);
}

2. 在导航器外层包裹Provider：

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

3. 在屏幕组件中使用全局状态：

// HomeScreen
function HomeScreen() {
  const { homeInput, setHomeInput } = useInput();
  return <TextInput value={homeInput} onChangeText={setHomeInput} />;
}

// SupportScreen
function SupportScreen() {
  const { supportInput, setSupportInput } = useInput();
  return <TextInput value={supportInput} onChangeText={setSupportInput} />;
}

方法3：本地持久化（适合需要持久保存的场景） #

如果需要关闭APP后仍保留输入内容，可以结合AsyncStorage（或react-native-mmkv）在输入变化时保存数据，组件挂载时读取：

import { useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

function SupportScreen() {
  const [inputValue, setInputValue] = useState('');

  useEffect(() => {
    // 组件挂载时读取本地存储
    async function loadData() {
      const savedValue = await AsyncStorage.getItem('supportInput');
      if (savedValue) setInputValue(savedValue);
    }
    loadData();
  }, []);

  useEffect(() => {
    // 输入变化时保存到本地
    async function saveData() {
      await AsyncStorage.setItem('supportInput', inputValue);
    }
    saveData();
  }, [inputValue]);

  return <TextInput value={inputValue} onChangeText={setInputValue} />;
}

内容的提问来源于stack exchange，提问作者cbdev