同时向多个屏幕传递参数

Question

I'm sending some data through my nested navigators. I've got 2 screens on my tab navigator QR kod and eINFO . I'm passing my data to qr kod here

      navigation.navigate("Drawer", {
        screen: "Home",
        params: {
          screen: "QR kod",
          params: { user: newUser },
        },
      });

these are my navigators

  return (
    <Tab.Navigator
      screenOptions={({route}) => ({
        tabBarIcon: ({focused, color, size}) => {
          let iconName;

          if (route.name === 'QR kod') {
            iconName = focused ? 'qrcode' : 'qrcode';
          } else if (route.name === 'eINFO') {
            iconName = focused ? 'infocirlceo' : 'infocirlceo';
          }

          return <AntDesign name={iconName} size={24} color={'black'} />;
        },
      })}
      tabBarOptions={{
        activeTintColor: 'red',
        inactiveTintColor: 'grey',
      }}>
      <Tab.Screen name="QR kod" component={Main} />
      <Tab.Screen name="eINFO" component={Einfo} />
    </Tab.Navigator>
  );
}

function DrawerNav() {
  return (
    <Drawer.Navigator initialRouteName="QR kod">
      <Drawer.Screen name="Home" component={TabNavigation} />
    </Drawer.Navigator>
  );
}

How do I pass the data to both eINFO and QR kod at the same time

Answer 1

Ciao, unfortunately if you are using navigation.navigate to pass data to qr kod screen, you cannot pass same data to eINFO screen at the same time. If you want to have the same data in both screens at the same time my suggest is to use a global state manager like react-redux . With react-redux you don't need to pass data between screens with navigation.navigate anymore. Just dispatch data you need to redux store and then read data dispatched in any screen you need.

Answer 2

Using the initialParams prop on your tabs may work. It's useful to pass params to child screens automatically.

function Home(props) {
  const params = props.route.params;
  return (
    <Tab.Navigator
      screenOptions={({route}) => ({
        tabBarIcon: ({focused, color, size}) => {
          let iconName;
          ...
    }>
      <Tab.Screen name="QR kod" component={Main} initialParams={params} />
      <Tab.Screen name="eINFO" component={Einfo} initialParams={params} />
    </Tab.Navigator>
  );
}

Then your user param will be passed to both screens.

Change your navigate call to:

navigation.navigate("Drawer", {
  screen: "Home",
  params: {
    screen: "QR kod",
    user: newUser,
  },
});

I'm not sure exactly how your data flow is structured from what you have posted. Usually however, something like 'user data' is best handled by Redux as Giovanni Esposito said.