如何通过嵌套的堆栈导航器传递参数并获取该参数(使tabbar在滚动时消失)

41zrol4v  于 2021-09-23  发布在  Java
关注(0)|答案(0)|浏览(205)

也许你能帮我。。。我试图让我的标签栏在滚动时消失。对于这一点,我有一个onscroll方法,告诉我是下降还是上升。

const offset = useRef(0);
const onScroll = (event) => {
    const { navigation } = props;
    const currentOffset = event.nativeEvent.contentOffset.y;
    let direction = "up";
    if (currentOffset > 0 && currentOffset < 322) {
      direction = currentOffset > offset.current ? "down" : "up";
    } else if (currentOffset > 321) {
      direction = "down";
    }

    offset.current = currentOffset;

    if (direction === "down") {
      navigation.dispatch(
        CommonActions.setParams({
          tabBarVisible: false,
        })
      );
    } else {
      navigation.dispatch(
        CommonActions.setParams({
          tabBarVisible: true,
        })
      );
    }
  };

在我的tabnavigator中,我有一个tab.screen,其中stacknavigator作为组件,而不是普通组件(这就是我无法获取参数的原因)。

<Tab.Screen
        name="Rezepte"
        component={RezepteNavigator}
        options={({ route }) => ({
          tabBarIcon: ({ size, focused }) => (
            <View
              style={{
                justifyContent: "center",
                alignItems: "center",
                top: 15,
              }}
            >
              <MaterialCommunityIcons
                name="chef-hat"
                size={size}
                color={focused ? "#976DF6" : "white"}
              />
            </View>
          ),
          tabBarVisible: getTabBarVisible(route),
        })}
      />

以及被调用的方法:

const getTabBarVisible = (route) => {
  const params = route.params;
  console.log(route);

  if (params) {
    if (params.tabBarVisible === false) {
      return false;
    }
  }
  return true;
};

现在在我的gettabbarvisible函数中,当我在console.log中记录传入参数的路由时,route.params是未定义的。。。

Object {
  "key": "Rezepte-GyxlHzzRdDwFjy9bSrM4-",
  "name": "Rezepte",
  "params": undefined,
  "state": Object {
    "index": 0,
    "key": "stack-SRrxFH25WBmoxgaK0R1h_",
    "routeNames": Array [
      "Rezepte",
      "RezepteDetails",
    ],
    "routes": Array [
      Object {
        "key": "Rezepte-kCioKGI812m0h8l4AXLD6",
        "name": "Rezepte",
        "params": Object {
          "tabBarVisible": false,
        },
      },
    ],
    "stale": false,
    "type": "stack",
  },
}

如果我将tab.screen的组件从“rezeptenavigator”更改为实际的组件“rezeptescreen”,它会工作,但我的链接不再工作,因为我没有通过stacknavigator。如果我尝试访问routes数组中的params属性,则会从react native中得到以下错误:

Accessing the 'state' property of the 'route' object is not supported. If you want to get the focused route name, use the 'getFocusedRouteNameFromRoute' helper instead: https://reactnavigation.org/docs/screen-options-resolution/#setting-parent-screen-options-based-on-child-navigators-state

那么,有没有办法设置参数“tabbarvisible”并通过tab.screen访问,即使链接到tab.screen的组件是stacknavigator?非常感谢,希望我很清楚。。。我的英语真的很差

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题