javascript - React Native 与 Firebase 身份验证和数据库初始化应用程序错误

Question

我设法让身份验证与我的 react native expo 应用程序一起工作。我可以登录，注册一个新用户，并将 displayName 添加到用户，一切都很好。

登录后，我将以下代码添加到屏幕，以便显示登录用户的 displayName 或电子邮件地址

MoreScreen.js

import React from 'react'
import firebase from 'firebase/app'
import Background from '../components/Background'
import Button from '../components/Button'
import Paragraph from '../components/Paragraph'
import { logoutUser } from '../api/auth-api'

const auth = firebase.auth()
const user = auth.currentUser
console.log(user)

export default function MoreScreen() {
  return (
    <Background>
      <Paragraph>Logged in as {user.displayName}</Paragraph>
      <Button mode="outlined" onPress={() => logoutUser()}>
        Logout
      </Button>
    </Background>
  )
}

auth-API 文件使用 firebase.auth().signOut() 将用户注销。当我单击注销按钮并使用其他帐户重新登录时，出现问题，displayName 仍然从以前登录的帐户显示。因此，signOut() 函数没有完成它的工作。

这是第 1 部分的问题。当我停止 Metro 服务器并重新启动它时，问题第 2 部分出现了，我得到了与此问题中的用户相同的 No Firebase App has been initialized。

错误：没有创建 Firebase 应用“[DEFAULT]” - 调用 Firebase App.initializeApp()

该问题的公认答案表明我需要在导入任何其他屏幕之前初始化应用程序，然后错误将不再存在。但是，linting 不会让我将 initializeApp 行置于导入其他屏幕之上。

应用程序.js

import React from 'react'
import { Provider } from 'react-native-paper'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { MaterialCommunityIcons } from '@expo/vector-icons'
import firebase from 'firebase/app'
import { firebaseConfig } from './src/core/config'
import { theme } from './src/core/theme'
import {
  StartScreen,
  LoginScreen,
  RegisterScreen,
  ResetPasswordScreen,
  HomeScreen,
  AuthLoadingScreen,
  MoreScreen,
  OrdersScreen,
  ItemsScreen,
  DrawerScreen,
} from './src/screens'

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig)
}

const Stack = createStackNavigator()
const Tab = createBottomTabNavigator()

export default function App() {
  return (
    <Provider theme={theme}>
      <NavigationContainer>
        <Stack.Navigator
          initialRouteName="AuthLoadingScreen"
          screenOptions={{
            headerShown: false,
          }}
        >
          <Stack.Group>
            <Stack.Screen
              name="AuthLoadingScreen"
              component={AuthLoadingScreen}
            />
            <Stack.Screen name="StartScreen" component={StartScreen} />
            <Stack.Screen name="LoginScreen" component={LoginScreen} />
            <Stack.Screen name="RegisterScreen" component={RegisterScreen} />
            <Stack.Screen
              name="HomeScreen"
              component={BottomNavigation}
              screenOptions={{
                headerShown: false,
              }}
            />
            <Stack.Screen
              name="ResetPasswordScreen"
              component={ResetPasswordScreen}
            />
          </Stack.Group>
          <Stack.Group screenOptions={{ presentation: 'modal' }}>
            <Stack.Screen name="DrawerScreen" component={DrawerScreen} />
          </Stack.Group>
        </Stack.Navigator>
      </NavigationContainer>
    </Provider>
  )
}

function BottomNavigation() {
  return (
    <Tab.Navigator
      screenOptions={() => ({
        headerShown: false,
        tabBarActiveTintColor: theme.colors.primary,
        tabBarInactiveTintColor: 'gray',
      })}
    >
      <Tab.Screen
        name="Dashboard"
        component={HomeScreen}
        options={{
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons
              name="view-dashboard"
              size={24}
              color={color}
            />
          ),
        }}
      />
      <Tab.Screen
        name="Items"
        component={ItemsScreen}
        options={{
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="package" size={24} color={color} />
          ),
        }}
      />
      <Tab.Screen
        name="Orders"
        component={OrdersScreen}
        options={{
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons
              name="clipboard-list"
              size={24}
              color={color}
            />
          ),
        }}
      />
      <Tab.Screen
        name="More"
        component={MoreScreen}
        options={{
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="more" size={24} color={color} />
          ),
        }}
      />
    </Tab.Navigator>
  )
}

如何以不同的方式布局我的代码，以便它在 App.js 文件中初始化应用程序，但仍允许我在另一个屏幕上查看用户详细信息或从另一个屏幕上的 firestore 获取数据而不会出现错误？而且，我如何让 signOut 函数真正让用户完全退出？

标签： javascriptfirebasereact-nativefirebase-authentication