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调用相应地获取数据。

在我的情况下，必须使用Drawer Navigation。我该如何传递数据。
可以提供任何帮助。很多！

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

在抽屉式导航React Native中发送参数

1 个答案: