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

【问题标题】：Sending Params in Drawer Navigation React Native在抽屉导航中发送参数 React Native
【发布时间】：2020-05-13 18:08:54
【问题描述】：

问题：向组件发送标志以对 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。我如何传递数据。
任何帮助表示赞赏。很多！

【问题讨论】：

请分享仪表板组件的代码
让我们假设它是一个基本的 React 原生组件。我需要向它传递数据的方法。

标签： javascript reactjs react-native react-router navigation

【解决方案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

【讨论】：

是的，我可以做到。但用例有点不同。