时间戳

首页 > 解决方案 > 如何获取用户名，以便可以使用 useLayoutEffect 将其放在页面标题中？

javascript - 如何获取用户名，以便可以使用 useLayoutEffect 将其放在页面标题中？

问题描述

我正在编写一个简单的应用程序（在本机反应中），当用户导航到个人资料页面时，页面的标题是用户的用户名。因此，我使用useLayoutEffect它来设置选项。我有类似的东西：

useLayoutEffect(() => {
      props.navigation.setOptions({
        title: props.route.params.name,
      });
  }, [props.route.params.name]);

效果很好。显然，当我导航到“个人资料”页面时，我有类似的东西

<Tab.Screen
        name="My Profile"
        component={ProfileScreen}
        listeners={(props) => ({
          tabPress: (event) => {
            props.navigation.navigate("Profile", {
              uid: currentUser.id
              name: currentUser.name,
            });
          },
        })}
      />

这又可以正常工作。但是，如果我导航到其他个人资料怎么办？我是否总是必须使用

props.navigation.navigate("Profile", {
                  uid: user.id
                  name: user.name,
                });

即同时传递用户 ID 和用户名以导航到个人资料页面。对我来说，这似乎是不必要的。理想情况下，我只想传递用户的 id（当导航到个人资料页面时）并从那里获取用户名。像这样的东西：

props.navigation.navigate("Profile", {
                      uid: user.id
                    });

然后在个人资料屏幕内：

useLayoutEffect(() => {
          props.navigation.setOptions({
            title: fetchUsersNamebasedOnId()
          });
      }, [props.route.params.id]);

这可能吗？我尝试了以下方法：

useLayoutEffect(() => {
    (async () => {
      props.navigation.setOptions({
        title: getName(),
      });
    })();
  }, [props.route.params.name]);

然后getName是返回名称的异步函数。但是它对我不起作用。是否可以在“个人资料”屏幕中获取名称并将其放在页面标题中？

标签： javascriptreactjsreact-native

解决方案

是的，有可能。你离它很近。

当您想使用该async功能时，您必须等到请求完成。为此，您使用await关键字。请参见下面的示例：

  useLayoutEffect(() => {
    const setName = async () => {
      const title = await getName(props.route.params.id)
      props.navigation.setOptions({
        title,
      })
    }
    setName()
  }, [props.route.params.id])

推荐阅读