React-navigation：如何根据条件设置screen的initialParams？

Question

I have BottomTabsNavigator as part of StackNavigator .

When I launch the app, I need to pass initialParams in Home tab based on a condition in BottomTabsNavigator .

Apparently, BottomTabsNavigator is rendered once only and initialParams always sends default value instead of new value based on condition.

  <Tab.Screen
    name="Home"
    component={HomeScreen}
    options={{
      title: 'Home',
      tabBarIcon: 'home-outline',
      tabBarLabel: 'Home',
    }}

    initialParams={{ 'tappedNotification1': notificationOpened }} // <---- here I want to send notificationOpened  value when its value is updated, 
  />

I use below hook to update value for notificationOpened to true (which needs to be sent as initialParams for Home screen.

    function onOpened(openResult) {
      navigation.navigate('NotificationDetailsScreen', {
        ...openResult.notification.payload.additionalData,
        tappedNotification: true,
        isRead: false,
      });

      setNotificationOpened(true);
    }
    OneSignal.addEventListener('opened', onOpened);

    return () => {
      OneSignal.removeEventListener('opened', onOpened);
    }; // unsubscribe on unmount
  }, [navigation, user]);

Updated Comment:

@Guruparan Giritharan I did exactly the same using your suggestion. its a little hard to explain but please stay with me.

In my BottomTabsNavigator I declare a state 'notificationOpened' with intialValue false and pass it to NotificationContext.Provider value. which is accessible in Home.

Home screen has a modal popup which should display based on the value received in context's notificationOpened (modal should display when notificationOpened is false)

in my case, I update notificationOpened value from BottomTabsNavigator to true so modal won't display.

but Home receives false from context at the beginning and show the modal. Hope that makes sense.

Answer 1

The official documentation recommends using context or some sort of store like redux to update the count variables on the tabs. You have a similar requirement. You can look at this sample to get an idea to do that.

First you will need to create a context file

const NotificationContext = React.createContext(0);

export default NotificationContext;

And the file which contains your tabs

const MyTabs = () => {
  const [count, setCount] = React.useState(0);

  return (
    <NotificationContext.Provider value={count}>
      <View style={{ flex: 1 }}>
        <Text>{count}</Text>
        <Button title="count" onPress={() => setCount(count + 1)} />
        <Tab.Navigator>
          <Tab.Screen name="Home" component={HomeScreen} options={{ title: 'My home' }}/>
          <Tab.Screen name="Settings" component={SettingsScreen} options={{ title: 'My home 2' }}/>
        </Tab.Navigator>
      </View>
    </NotificationContext.Provider>
  );
};

And the Homescreen file can read and update itself using the 'usecontext'

import NotificationContext from './NotificationContext';

export function HomeScreen() {
  const count = React.useContext(NotificationContext);
  return (
    <View>
      <Text>{count}</Text>
    </View>
  );
}

This sample is based on the snack you provided. https://snack.expo.io/@guruparan/tabs-with-context