React-navigation: как установить initialParams для экрана в зависимости от условия?

Question

У меня BottomTabsNavigator как часть StackNavigator.

Когда я запускаю приложение, мне нужно передать initialParams на вкладке «Главная» на основе условия в BottomTabsNavigator.

Очевидно, BottomTabsNavigator визуализируется только один раз, а initialParams всегда отправляет значение по умолчанию вместо нового значения в зависимости от условия.

  <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, 
  />

Я использую крючок ниже, чтобы обновить значение notificationOpened до истины (которое должно быть отправлено как initialParams для главного экрана.

    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]);

Обновленный комментарий :

@ Guruparan Giritharan Я сделал то же самое, используя ваше предложение. Это немного сложно объяснить, но, пожалуйста, оставайтесь со мной.

В моем BottomTabsNavigator я объявляю состояние ' notificationOpened 'с intialValue false и передайте его в значение NotificationContext.Provider. которое доступно в Home.

Home экран имеет модальное всплывающее окно, которое должно отображаться на основе значения, полученного в контексте notificationOpened (modal should display when notificationOpened is false)

в моем случае, я обновляю значение notificationOpened с BottomTabsNavigator до true, поэтому модальный режим не отображается.

но Home получает false из контекста в начале и показывает модальный. Надеюсь, что это имеет смысл.

Answer 1

Официальная документация рекомендует использовать контекст или какое-то хранилище, например redux, для обновления счетных переменных на вкладках. У вас есть аналогичное требование. Вы можете посмотреть этот пример, чтобы понять, как это сделать.

Сначала вам нужно будет создать файл контекста

const NotificationContext = React.createContext(0);

export default NotificationContext;

И файл, содержащий ваши вкладки

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>
  );
};

И файл домашнего экрана может считываться и обновляться с помощью 'usecontext'

import NotificationContext from './NotificationContext';

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

Этот образец основан на предоставленной вами закуске. https://snack.expo.io/@guruparan / вкладки с контекстом