React Native Navigation跨屏幕调用setState及页面返回状态重置问题咨询

嘿，我刚好碰到过和你一模一样的场景，给你两个实用的办法来解决这个状态重置的问题！

先回顾下你的情况：你用React Native Navigation v6做了一个有3个主页面的应用，Homescreen是底部栈页面，Historikk和Kjøring堆叠在它上方。Kjøring页面的启停按钮状态，在你返回Homescreen再回来时会重置成初始的“启动”状态，你试过把状态放在Homescreen里传递，但默认的返回按钮没法带状态回来，也纠结过怎么把setState函数传过去。

方法一：用React Context管理全局状态（最推荐） #

这个方法适合跨页面共享状态的场景，不管怎么切换页面，状态都会全局保留，完全不用担心重置的问题。

步骤1：创建Context文件 #

新建一个RunningContext.js文件，把状态和修改状态的函数封装在Context里：

// RunningContext.js
import React, { createContext, useState, useContext } from 'react';

const RunningContext = createContext();

// 提供状态的Provider组件
export function RunningProvider({ children }) {
  const [isRunning, setIsRunning] = useState(false);

  return (
    <RunningContext.Provider value={{ isRunning, setIsRunning }}>
      {children}
    </RunningContext.Provider>
  );
}

// 自定义钩子，方便页面获取状态
export function useRunning() {
  return useContext(RunningContext);
}

步骤2：在根组件包裹导航 #

在你的App.js里，用RunningProvider把整个导航组件包起来，这样所有页面都能访问这个状态：

// App.js
import { RunningProvider } from './RunningContext';
import { NavigationContainer } from '@react-navigation/native';
// 导入你的导航栈配置

export default function App() {
  return (
    <RunningProvider>
      <NavigationContainer>
        {/* 这里放你的导航栈/底部导航组件 */}
      </NavigationContainer>
    </RunningProvider>
  );
}

步骤3：修改Homescreen页面 #

不用自己存状态了，直接通过自定义钩子获取状态，跳转时也不用传参数了：

// Homescreen.js
import { useRunning } from './RunningContext';

function Homescreen({ navigation }) {
  // 这里如果需要用到状态也可以直接取，不用自己维护
  // const { isRunning } = useRunning();

  return (
    {/* 你的页面内容 */}
    <TouchableOpacity
      onPress={() => navigation.navigate("Kjøring")}
      style={/* 你的按钮样式 */}
    >
      <Text>进入Kjøring页面</Text>
    </TouchableOpacity>
  );
}

步骤4：修改Kjøring页面 #

直接用钩子获取状态和修改函数，按钮逻辑完全不用依赖props传递：

// Kjøring.js
import { useRunning } from './RunningContext';

function Kjøring() {
  const { isRunning, setIsRunning } = useRunning();

  const handleStart = () => {
    setIsRunning(true);
    // 这里写你的启动逻辑，比如开始计时、请求接口等
  };

  const handleStop = () => {
    setIsRunning(false);
    // 这里写你的停止逻辑
  };

  return (
    <View>
      {!isRunning ? (
        <View style={styles.startContainer}>
          <TouchableOpacity onPress={handleStart} style={styles.startButton}>
            <Image style={styles.playImage} source={require("../Images/Play.png")} />
          </TouchableOpacity>
          <Text style={styles.startContainerText}>Start</Text>
        </View>
      ) : (
        <View style={styles.startContainer}>
          <TouchableOpacity onPress={handleStop} style={styles.startButton}>
            <Image style={styles.playImage} source={require("../Images/Stop.png")} />
          </TouchableOpacity>
          <Text style={styles.startContainerText}>Stopp</Text>
        </View>
      )}
    </View>
  );
}

这样不管你怎么切换页面，状态都会被全局保存，按钮的显示永远是正确的。

方法二：用Navigation Params结合useFocusEffect（轻量方案） #

如果不想用全局Context，这个轻量方案也能解决问题，核心是利用页面聚焦事件同步状态。

步骤1：在Homescreen传递状态和setter #

直接把状态和setStarted函数作为导航参数传过去：

// Homescreen.js
import { useState } from 'react';

function Homescreen({ navigation }) {
  const [started, setStarted] = useState(false);

  return (
    {/* 你的页面内容 */}
    <TouchableOpacity
      onPress={() => {
        navigation.navigate("Kjøring", {
          started: started,
          setStarted: setStarted
        });
      }}
    >
      <Text>进入Kjøring页面</Text>
    </TouchableOpacity>
  );
}

步骤2：在Kjøring页面同步状态 #

用useFocusEffect监听页面聚焦，每次回到Kjøring时都同步最新的状态：

// Kjøring.js
import { useFocusEffect } from '@react-navigation/native';
import { useState, useCallback } from 'react';

function Kjøring({ route, navigation }) {
  // 初始化状态为传递过来的值
  const [start, setStart] = useState(route.params?.started || false);
  const setStarted = route.params?.setStarted;

  // 当页面聚焦时，同步Homescreen的最新状态
  useFocusEffect(
    useCallback(() => {
      setStart(route.params.started);
    }, [route.params.started])
  );

  const handleStart = () => {
    setStart(true);
    setStarted(true); // 同步更新Homescreen的状态
    // 你的启动逻辑
  };

  const handleStop = () => {
    setStart(false);
    setStarted(false); // 同步更新Homescreen的状态
    // 你的停止逻辑
  };

  // 按钮部分和你原来的代码一样
  return (
    <View>
      {!start ? (
        <View style={styles.startContainer}>
          <TouchableOpacity onPress={handleStart} style={styles.startButton}>
            <Image style={styles.playImage} source={require("../Images/Play.png")} />
          </TouchableOpacity>
          <Text style={styles.startContainerText}>Start</Text>
        </View>
      ) : (
        <View style={styles.startContainer}>
          <TouchableOpacity onPress={handleStop} style={styles.startButton}>
            <Image style={styles.playImage} source={require("../Images/Stop.png")} />
          </TouchableOpacity>
          <Text style={styles.startContainerText}>Stopp</Text>
        </View>
      )}
    </View>
  );
}

这里要注意，useFocusEffect需要配合useCallback使用，避免不必要的重渲染。当你从Homescreen返回Kjøring时，页面会触发聚焦事件，这时就会同步最新的状态，按钮就能正确显示了。

总结 #

• 如果以后还有其他页面需要用到这个启停状态，优先用Context方法，代码更易维护；
• 如果只是这两个页面共享状态，用Params+useFocusEffect就足够了，不用引入全局状态。

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