javascript - 根据登录状态加载按钮时出现问题

Question

我正在尝试不同的方法来根据认证状态显示条件按钮，但我总是遇到麻烦。我有一个定义 stacknavigator 的 app.js，它在标题中添加一个按钮，提供在经过身份验证时注销的选项。
我编写了一个应该执行此操作的handleLogout 函数。

import React from 'react';
import { Button, Image, View, Text } from 'react-native';
import firebase from 'react-native-firebase';
import Loading from './Loading';
import SignUp from './SignUp';
import Login from './Login';
import Main from './Main';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import { useNavigation } from '@react-navigation/native';

// eslint-disable-next-line no-undef
handleLogOut = () => {
  const navigation = useNavigation();
  firebase
    .auth()
    .signOut()
    .then(() => this.props.navigation.navigate('Login'))
    .catch(error => this.setState({errorMessage: error.message}));
};

const AppNavigator = createStackNavigator(
  {
    Loading: Loading,
    SignUp: SignUp,
    Login: Login,
    Main: Main,
  },
  {
    initialRouteName: 'Loading',

    defaultNavigationOptions: {
      headerLeft: null,
      headerRight: () => {
          let button = this.loggedIn? (
          <Button
          onPress={this.handleLogOut}
          title="Log-out"
          color="#fff"
          />
        )
        : 
        (
          <Button
          onPress={() => alert('Please log in')}
          title="Log-in"
          color="#fff"
          />
        )
          return button;
      },

      headerStyle: {
        backgroundColor: '#c6f1e7',
      },
      headerTintColor: '#59616e',
      headerTitleStyle: {
        fontFamily: 'Raleway-Regular',
        fontWeight: '400',
      },
    },
  },
);

export default createAppContainer(AppNavigator);

App.js 调用 loading.js，其中根据身份验证状态声明了登录值，然后加载 main.js 或注册。在这种情况下，主页已加载，这意味着某人已通过身份验证:

// Loading.js
import React from 'react';
import {View, ActivityIndicator, StyleSheet} from 'react-native';
import firebase from 'react-native-firebase';

export default class Loading extends React.Component {
  componentDidMount() {
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        this.setState({ loggedIn: true })
        this.props.navigation.navigate(user ? 'Main' : 'SignUp');
      } else {
        this.setState({ loggedIn: false })
      }
    });
  }
  render() {
    return (
      <View style={styles.container}>
        <ActivityIndicator size="large" />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#c6f1e7',
  },
});

现在页面重定向到主页面并显示欢迎消息，这表明用户已登录，但标题中的按钮也显示“登录”，这意味着该按钮没有选择好。我认为这是因为未读取登录值，并且它自动将其设置为登录:false。

这是 main.js 的代码

// Main.js
import React from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import firebase from 'react-native-firebase';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import Kowops from './Kowops';
import Scan from './Scan';
import Wallet from './Wallet';

export class Main extends React.Component {
  state = { currentUser: null }
  componentDidMount() {
    const { currentUser } = firebase.auth()
    this.setState({ currentUser })
}
  render() {
    const { currentUser } = this.state

  return (
      <View style={styles.container}>
        <Text>
          Hidiho {currentUser && currentUser.email}!
        </Text>
      </View>
    )
  }
}
 const bottomTabNavigator = createBottomTabNavigator(
  {
    Main: {screen: Main},
    Kowops: {screen:Kowops},
    Scan: {screen:Scan},
    Wallet: {screen:Wallet},
  },
  {
    //initialRouteName: 'Main',
    tabBarOptions: {
      initialRouteName: 'Main',
      activeTintColor: '#59616e',
      inactiveTintColor: '#a9a9a9',
      style: {
        backgroundColor: '#c6f1e7',
     }
    },
  });

export default createAppContainer(bottomTabNavigator);

const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    }
  }) 

所以我需要弄清楚如何确保 isloggedin 的值被正确读取并且脚本加载正确的按钮。

有人知道吗？

提前致谢!!

蒂姆

Answer 1

这里的关键是，在这种情况下，如果不将它们作为 Prop 传递或通过导航参数传递，则无法在不同组件之间使用状态。您不能在功能组件之外使用 useNavigation Hook ，因此当您在组件之外需要导航对象时，应该传递导航对象(handleLogout 不是组件)。

以下是我要做的一些更改，但是我建议您需要根据可以使用导航参数在屏幕之间传递信息的想法进行进一步的更改。在这里查看更多 https://reactnavigation.org/docs/en/params.html .

App.js

DefaultNavigationOptions 可以是一个具有导航属性的函数，这是您可以用来获取参数或在路由器上下文中导航的导航对象。

删除 eslint 异常，因为您不需要它，只需正确声明变量即可。从handleLogout函数调用中删除“this”，因为它不是类属性。使用 navigation.getParam 获取 isLoggedIn 变量，您可以在导航函数调用中传递该变量。

const handleLogout = navigation => {
    firebase
        .auth()
        .signOut()
        .then(() => navigation.navigate('Login'))
        .catch(error => this.setState({errorMessage: error.message}));
}

...

defaultNavigationOptions: ({navigation}) => ({
    headerRight: () => {

        const isLoggedIn = navigation.getParam('isLoggedIn', false);
        let button = isLoggedIn ? (
          <Button
            onPress={() => handleLogOut(navigation)}
            title="Log-out"
            color="#fff"
          />
        ) : ...
    } ...

正在加载.js在这里，您需要向导航调用添加一个导航参数，然后可以在标题中使用该参数

 ...
 firebase.auth().onAuthStateChanged(user => {
  if (user) {

    this.props.navigation.navigate('Main', {isLoggedIn: true});
  } else {
    this.props.navigation.navigate('SignUp', {isLoggedIn: false});
  }
});    

这是您在零食中的代码的修改版本，您可以看到它将获取登录参数并显示注销按钮 https://snack.expo.io/@dannyhw/intrigued-graham-crackers您将需要进行进一步的更改来修复其他功能，因为我只更改了最小值以表明您可以使用导航参数。