Question

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

2020-05-13

2418

javascript reactjs react-native react-router navigation

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

因此我有两个用例
第一个 ：获取选择性数据
第二个 ：获取所有数据

因此我在 Drawer Navigation 中使用了相同的组件，并尝试在代码中传递一个标志，如下所示

<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