如何从父组件更新 Tab.Screen 的属性（传递状态值），反应原生

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> 

--> 在前 3 个步骤（屏幕）中，我使用回调函数“step#Order”填充状态

我想要的是，当我在步骤1、2、3中填充数据时，我希望“屏幕4”的道具自动更新，我在initialParams上使用了状态，但它的屏幕组件不会重新渲染

• 这就是我声明屏幕 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('Screen4', { dataStep1, dataStep2, dataStep3 });

然后在屏幕 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 导航文档的参数部分了解更多信息。

Answer 2

这方面有什么更新吗？我面临着类似的问题。