在抽屉导航中发送参数 反应本机

Question

>问题：向组件发送标志以对 API 进行条件调用

所以我首先有两个用例
：获取选择性数据其次：获取所有数据

所以我在抽屉导航中使用相同的组件，并尝试在代码中传递一个标志，如下所示

<Drawer.Navigator>
<Drawer.Screen initialParams={{ showAll: false }} name="Selective Data" component={Dashboard} />
<Drawer.Screen initialParams={{ showAll: true }} name="See All Data" component={Dashboard} />
</Drawer.Navigator>

但是 initialParams 只设置一次。但我想向组件发出信号以进行单独的 API 调用 以相应地获取数据。

就我而言，必须使用抽屉导航。 如何传递数据。
任何帮助，不胜感激。 很多！

Answer 1

您可以使用 route.params 获取传递的参数并进行相应的处理，下面是一个简单的代码，用于显示基于参数的文本。

function HomeScreen({ route,navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>{route.params.showAll?"ALL":"Single"}</Text>
<Button
onPress={() => navigation.navigate('Notifications')}
title="Go to notifications"
/>
</View>
);
}
const Drawer = createDrawerNavigator();
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen initialParams={{ showAll: false }} name="Home" component={HomeScreen} />
<Drawer.Screen initialParams={{ showAll: true }} name="Home1" component={HomeScreen} />
</Drawer.Navigator>
</NavigationContainer>
);
}

您可以查看零食以进行演示 https://snack.expo.io/@guruparan/fbe120