React-navigation:如何根据条件为屏幕设置初始参数? [英] React-navigation: How to set initialParams for screen based on condition?

问题描述

我将 BottomTabsNavigator 作为 StackNavigator 的一部分.

I have BottomTabsNavigator as part of StackNavigator.

当我启动应用程序时，我需要根据 BottomTabsNavigator 中的条件在主页"选项卡中传递 initialParams.

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

显然，BottomTabsNavigator 只渲染一次，并且 initialParams 总是根据条件发送默认值而不是新值.

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

我使用下面的钩子将 notificationOpened 的值更新为 true(需要作为主屏幕的 initialParams 发送.

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

更新评论:

@Guruparan Giritharan我使用您的建议完全相同.这有点难以解释，但请留在我身边.

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

在我的 BottomTabsNavigator 中，我使用 intialValue false 声明了一个状态notificationOpened"，并将其传递给 NotificationContext.Provider 值.可在 Home 中访问.

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

Home 屏幕有一个模式弹出窗口，它应该根据上下文的 notificationOpened 中接收到的值来显示

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)

就我而言，我将 notificationOpened 值从 BottomTabsNavigator 更新为 true，因此不会显示模态.

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

但是 Home 在开始时从上下文接收 false 并显示模态.希望这是有道理的.

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

推荐答案

官方文档建议使用上下文或某种类似 redux 的存储来更新选项卡上的计数变量.你有类似的要求.您可以查看此示例以了解这样做的想法.

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;

以及包含标签的文件

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"读取和更新自身

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

此示例基于您提供的零食.https://snack.expo.io/@guruparan/tabs-with-context

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

这篇关于React-navigation:如何根据条件为屏幕设置初始参数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！