Firebase 如何在React native in-Stack导航中传递导航道具？

我不熟悉react native，在react导航版本5.x中遇到了一些问题

下面是App.js文件

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import MyDrawer from "./components/MyDrawer";
import LoginScreen from "./screens/LoginScreen";

import firebase from "firebase";
import { firebaseConfig } from "./config";
firebase.initializeApp(firebaseConfig);


const Stack = createStackNavigator();

export default class App extends React.Component {
  state = {
    isLoggedIn: false,
  };
  logOut = () => {
    this.setState({ isLoggedIn: false });
    firebase.auth().signOut();
  };
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator
          screenOptions={{
            headerShown: false,
          }}
        >
          {this.state.isLoggedIn ? (
            <>
              <Stack.Screen name="Home" component={MyDrawer} />
            </>
          ) : (
            <Stack.Screen name="SignIn" component={LoginScreen} />
          )}
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

从“@react-navigation/native”导入{NavigationContainer}”；
从“@react navigation/stack”导入{createStackNavigator}；
从“/components/MyDrawer”导入MyDrawer；
从“/screens/LoginScreen”导入LoginScreen；
从“firebase”导入firebase；
从“/config”导入{firebaseConfig}；
firebase.initializeApp（firebaseConfig）；
const Stack=createStackNavigator（）；
导出默认类App扩展React.Component{
状态={
伊斯洛格丁：错，
};
注销=（）=>{
this.setState（{isLoggedIn:false}）；
firebase.auth（）.signOut（）；
};
render（）{
返回(
{this.state.isLoggedIn(
) : (
)}
);
}
}

如果用户登录到firebase，它将导航到MyDrawer.js。它有一个自定义抽屉，抽屉有一个注销按钮

MyDrawer.js

import HomeScreen from "../screens/HomeScreen";
import Colors from "../Colors";
import ShareListScreen from "../screens/ShareListScreen";
import Inpiration from "../screens/Inspiration";

const Drawer = createDrawerNavigator();

export default class MyDrawer extends React.Component {
  state = {
    title: this.props,
  };
  render() {
    return (
      <Drawer.Navigator
        initialRouteName="Home"
        drawerContent={(props) => <CustomDrawerContent {...props} />}
      >
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Share List" component={ShareListScreen} />
        <Drawer.Screen name="Inspiration" component={Inpiration} />
      </Drawer.Navigator>
    );
  }
}
function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <View >
        <ImageBackground source={image} >
          <Text>
            Bring
            <Text>Me</Text>
          </Text>
        </ImageBackground>
      </View>
      <DrawerItemList {...props} />
      <ImageBackground source={home} >
        <Text >Home</Text>
      </ImageBackground>
      <ImageBackground source={work} >
        <Text>Workplace</Text>
      </ImageBackground>
      <DrawerItem
        label="Log out"
        onPress={() => {
          this.props.logOut;
          this.props.navigation.navigate("SignIn"); 
 
  // Once the button pressed I want the user to sign out from firebase and navigate
to the root and set isLoggedIn state to true in App.js. 

        }}
      />
    </DrawerContentScrollView>
  );
}

从“./屏幕/主屏幕”导入主屏幕；
从“./Colors”导入颜色；
从“./screens/ShareListScreen”导入ShareListScreen；
从“./屏幕/灵感”导入灵感；
const Drawer=createDrawerNavigator（）；
导出默认类MyDrawer扩展React.Component{
状态={
标题：this.props，
};
render（）{
返回(
}
>
);
}
}
功能CustomDrawerContent（道具）{
返回(
带来
我
家
工作场所
{
此为.props.logOut；
这个.props.navigation.navigate（“登录”）；
//按下按钮后，我希望用户从firebase注销并导航
在App.js中将isLoggedIn状态设置为true。
}}
/>
);
}

按下注销按钮后，我希望用户从firebase注销并导航到根目录，并在App.js中将isLoggedIn状态设置为true。（在App.js中调用注销函数）

---

如何实现这一点？

您可以使用initialParams传递注销函数

 <Stack.Screen name="Home" component={MyDrawer} initialParams={{this.logout}}/>

此函数可以在MyDrawer类中作为

This.props.routes.params.logout（）

当状态发生变化时，您不必再次导航到登录，您可以呈现“登录”，这样应用程序将自动显示登录屏幕。
您可以使用initialParams传递注销功能

 <Stack.Screen name="Home" component={MyDrawer} initialParams={{this.logout}}/>



此函数可以在MyDrawer类中作为
This.props.routes.params.logout（）

而且，当状态发生变化时，您不必再次导航到登录，您可以呈现“登录”，这样应用程序将自动显示登录屏幕。
导航后呼叫注销不是最好的方法。您应该将您的注销代码移动到抽屉屏幕中，按下注销按钮，首先从firebase注销用户，然后导航到根回调函数。为避免导航复杂性，请尝试使用异步存储。如果你想更频繁地使用道具，试着用react原生钩子代替常规类。这不是在导航后调用注销的最佳方法。您应该将您的注销代码移动到抽屉屏幕中，按下注销按钮，首先从firebase注销用户，然后导航到根回调函数。为避免导航复杂性，请尝试使用异步存储。如果你想更频繁地使用道具，试着用react原生钩子代替常规类。没关系。但是如何将函数传递给CustomDrawerContent。this.props.routes.params.logout（）在CustomDrawerContents中不起作用。试试这个，没关系。但是如何将函数传递给CustomDrawerContent。this.props.routes.params.logout（）在CustomDrawerContentContents中不起作用。请尝试以下操作