React Native父组件如何更新Tab.Screen props（传递状态值）

initialParams 仅在对应Tab页面首次初始化时注入一次参数，后续父组件状态更新不会自动同步到已完成初始化的页面参数中，因此Step4无法自动获取最新数据，这是React Navigation的默认设计，并非代码异常。

方案1：React Context共享状态（最适配多步表单场景，优先推荐） #

多步表单跨页面共享状态是Context的典型适用场景，不需要依赖导航参数传值，状态变更会自动触发所有订阅组件重渲染，实现逻辑如下：

1. 新建表单状态Context

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

const OrderFormContext = createContext(null);

// 自定义hook简化子组件调用
export const useOrderForm = () => useContext(OrderFormContext);

export const OrderFormProvider = ({ children }) => {
  const [dataStep1, setDataStep1] = useState({});
  const [dataStep2, setDataStep2] = useState({});
  const [dataStep3, setDataStep3] = useState({});

  const validateInput = (dataInputs) => {
    if (!dataInputs || Object.keys(dataInputs).length === 0) {
      Alert.alert("Unknown Error", "Order Not Created , Please Check inputs you Entred");
      return false;
    }
    return true;
  }

  const step1Order = (dataInputs) => {
    if (!validateInput(dataInputs)) return;
    setDataStep1(dataInputs);
  }

  const step2Order = (dataInputs) => {
    if (!validateInput(dataInputs)) return;
    setDataStep2(dataInputs);
  }

  const step3Order = (dataInputs) => {
    if (!validateInput(dataInputs)) return;
    setDataStep3(dataInputs);
  }

  const step4Order = () => {
    // 订单提交逻辑
  }

  return (
    <OrderFormContext.Provider value={{
      dataStep1, dataStep2, dataStep3,
      step1Order, step2Order, step3Order, step4Order
    }}>
      {children}
    </OrderFormContext.Provider>
  )
}

2. 将Provider包裹在导航容器外层，此时所有Tab.Screen不需要再传动态的initialParams

return (
  <OrderFormProvider>
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Step 1" component={Step1} />
        <Tab.Screen name="Step 2" component={Step2} />
        <Tab.Screen name="Step 3" component={Step3} />
        <Tab.Screen name="Step 4" component={Step4} />
      </Tab.Navigator>
    </NavigationContainer>
  </OrderFormProvider>
)

3. 子页面直接通过hook获取状态和方法，Step4修改为如下写法即可自动响应状态更新

const Step4 = ({ navigation }) => {
  const { dataStep1, dataStep2, dataStep3, step4Order } = useOrderForm();
  const dataOrder = { dataStep1, dataStep2, dataStep3 };

  useEffect(() => {
    console.log("Step 4 Loaded ====  with dataOrder : \n", dataOrder);
  }, [dataOrder])

  useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      console.log("\n---- Step4 Focus ----\n with data : \n", dataOrder);
    });
    return unsubscribe;
  }, [navigation, dataOrder]);

  return (
    // 页面内容
  )
}

Step1/Step2/Step3页面同理，直接调用useOrderForm()获取对应的赋值方法即可，不需要再通过route.params拿回调。

方案2：手动调用setParams更新页面参数（轻量场景可选） #

如果不想引入Context，可以在父组件状态变化时，手动调用导航的setParams方法更新Step4的参数。注意该方案需要确保Step4页面已经完成初始化，否则setParams可能不生效。

// 父组件中
const navigation = useNavigation();
useEffect(() => {
  navigation.setParams({
    dataOrder: { dataStep1, dataStep2, dataStep3 }
  })
}, [dataStep1, dataStep2, dataStep3, navigation])

方案3：全局状态管理 #

如果项目已经接入Redux、Zustand、Jotai等全局状态库，直接将多步表单状态存入全局store即可，子组件订阅对应状态，更新时会自动触发重渲染，逻辑和Context方案一致。

原有代码中的空值判断dataInputs == {}永远不会生效，JS中对象是引用类型，两个独立空对象的内存地址不同，比较结果永远为false，判断空对象需要使用Object.keys(dataInputs).length === 0。

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