javascript - 在 React Native 中使用 Firebase 自定义声明有条件地渲染 UI

Question

我目前正在使用 firebase 构建一个 react native 项目，并且我想使用自定义声明有条件地渲染 Navigator。查看 firebase 文档，他们给出的示例是：

firebase.auth().currentUser.getIdTokenResult()
  .then((idTokenResult) => {
     // Confirm the user is an Admin.
     if (!!idTokenResult.claims.admin) {
       // Show admin UI.
       showAdminUI();
     } else {
       // Show regular user UI.
       showRegularUI();
     }
  })
  .catch((error) => {
    console.log(error);
  });

因此，尝试将其转换为原生反应，这就是我想出的：

export default function UINav () {
return firebase
    .auth()
    .currentUser.getIdTokenResult()
    .then((tokenResult) => {
      if (tokenResult.claims.admin) {
        return (
          <NavigationContainer>
            <Stack.Navigator
              mode="modal"
            >
              <Stack.Screen
                name="Admin"
                component={AdminNavigator}
              />
            </Stack.Navigator>
          </NavigationContainer>
        )
      } else {
        return (
          <NavigationContainer>
            <Stack.Navigator
              mode="modal"
            >
              <>
                <Stack.Screen
                  name="User"
                  component={UserNavigator}
                />
              </>
            </Stack.Navigator>
          </NavigationContainer>
        )
      }
    })

}

我得到的错误是：

错误：对象作为 React 子对象无效（找到：带有键 {_U、_V、_W、_X} 的对象）。如果您打算渲染一组子项，请改用数组。

任何帮助，将不胜感激 ：）

标签： javascriptreactjsfirebasereact-nativefirebase-authentication

Answer 1

尝试这样做

const Display = () => {
  const [toDisplay, setToDisplay] = useState(
    <NavigationContainer>
      <Stack.Navigator mode="modal">
        <>
          <Stack.Screen name="User" component={UserNavigator} />
        </>
      </Stack.Navigator>
    </NavigationContainer>,
  );
  useEffect(() => {
    firebase
      .auth()
      .currentUser.getIdTokenResult()
      .then((tokenResult) => {
        if (tokenResult.claims.admin) {
          setToDisplay(
            <NavigationContainer>
              <Stack.Navigator mode="modal">
                <Stack.Screen name="Admin" component={AdminNavigator} />
              </Stack.Navigator>
            </NavigationContainer>,
          );
        }
      });
  }, []);

  return toDisplay;
};

export default function UINav() {
  return <Display />;
}

不要忘记从 React 导入 useEffect 和 useState。