如何在 Stack Navigation 的 React Native 中传递导航道具？

Question

我是 React Native 的新手，遇到 React Navigation 版本的一些问题 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>
    );
  }
}

如果用户登录到 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>
  );
}

一旦按下注销按钮，我希望用户从 firebase 注销并导航到根目录并在 App.js 中将 isLoggedIn 状态设置为 true。 (在App.js中调用注销功能)。

我怎样才能做到这一点？

Answer 1

您可以使用initialParams来传递登出功能

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

此功能可以在 MyDrawer class 中访问为 this.props.routes.params.logout()

而且您不必再次导航到登录，因为状态发生变化时您会呈现 'SignIn'，因此应用会自动显示登录屏幕。

如何在 Stack Navigation 的 React Native 中传递导航道具？

How to pass navigation props in React native in Stack Navigation?

firebase

react-native

firebase-authentication

react-native-navigation

google-cloud-firestore