如何更新tab的道具。从父组件（传递状态值），反应本机

Question

我的项目配置：

{
   "expo" : "^45.0.0",
   "react-native": "0.68.2",
   "@react-navigation/bottom-tabs": "^6.0.9",
   "@react-navigation/drawer": "^6.1.8",
   "@react-navigation/material-top-tabs": "^6.0.6",
   "@react-navigation/native": "^6.0.6",
}

我正在使用 toptabnavigator 来创建四个屏幕

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

const step1Order = (dataInputs) =>
{
    if (dataInputs == null || dataInputs == {})
    {
        Alert.alert("Unknown Error", "Order Not Created , Please Check inputs you Entred");
        return;
    }

    setDataStep1(dataInputs);
}

// same above function for step2 & step3 step2Order() step3Order()


return (

<NavigationContainer>
   <Tab.Navigator>
       <Tab.Screen name="Step 1" component={Step1} initialParams={{ hundlerFillData: step1Order,}}/>
       <Tab.Screen name="Step 2" component={Step2} initialParams={{hundlerFillData: step2Order}} />
       <Tab.Screen name="Step 3" component={Step3} initialParams={{hundlerFillData: step3Order}} />
       <Tab.Screen name="Step 4" component={Step4} 
             initialParams={{
                  confirmOrder: step4Order,
                  dataOrder : {
                      dataStep1: dataStep1,
                      dataStep2: dataStep2,
                      dataStep3: dataStep3,
                  },
             }}
       />

    </Tab.Navigator>
</NavigationContainer> 

- ＆gt;在前3个步骤（屏幕）中，我使用回调函数“步骤＃顺序” 填充状态

我想要的是在步骤1,2,3中填写数据时，我希望自动更新'屏幕4'的道具，我在 initialparamss上使用了状态，但是它是屏幕组件不重新汇总

• 这就是我声明屏幕4的方式：

const Step4 = ({route, navigation}, props ) => {

    const {confirmOrder, dataOrder} = route?.params;

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

    /// Screen Focus
    useEffect(()=> {

        const unsubscribe = navigation.addListener('focus', () => {
            console.log("\n---- mini Hello in Focus Step 4 ----\n with props : \n", route.params);
        });
    
        return unsubscribe;
    }, [route]);


    return (
        <.../>
    )
}

Answer 1

做您描述的最常用方法是在navigate调用中使用导航参数。因此，如果您在屏幕3中拥有所有需要的数据，则会调用

navigation.navigate.navigate（'Screen4'，{dataStep1，datastep2，datastep2，datastep3}）;

，然后在屏幕4，4，然后由于您使用的是钩子：

const { params } = useRoute();
const { dataStep1, dataStep2, dataStep3 } = params || {};

另外，假设您在其他任何地方都不需要数据，则不必将状态保持在导航器级别，而是将回调传递给每个屏幕。您只需使用上述导航参数即可将数据从一个屏幕传递到另一个屏幕。

// screen 1
navigation.navigate('Screen2', { dataStep1 });

// screen 2
const { params } = useRoute();
const { dataStep1 } = params || {};
...
navigation.navigate('Screen3', { dataStep1, dataStep2 });

请参阅“ react navigation docs的参数”部分 更多。