Question

我为我的本机应用程序设置了Firebase身份验证。我能够为任何不正确的登录创建新的登录和身份验证失败。

用户登录后，我希望他们使用按钮注销，但是不幸的是，该按钮不可见，并且仅文本显示在屏幕上..

“ App.js“

 import React, { Component } from 'react';
 import { View } from 'react-native';
 import firebase from 'firebase';
 import { Header, Button, Spinner } from './components/common';
  import LoginForm from './components/LoginForm';

  class App extends Component {
     state = { loggedIn: null };

      componentWillMount() {
          firebase.initializeApp(
          {
          apiKey: "",
          authDomain: "",
          databaseURL: "",
          projectId: "",
          storageBucket: "",
          messagingSenderId: ""
         }
        );

      firebase.auth().onAuthStateChanged((user) => {
        if (user) {
          this.setState({ loggedIn: true });
        } else {
       this.setState({ loggedIn: false });
       }
      });
     }

    renderContent() {
      switch (this.state.loggedIn) {
      case true:
        return (
          <Button onPress={() => firebase.auth().signOut()}>
           Log Out
          </Button>
         );
      case false:
         return <LoginForm />;
      default:
        return <Spinner size="large" />;
      }
  }

  render() {
     return (
       <View>
        <Header headerText="Authentication" />
        {this.renderContent()}
       </View>
    );
   }
  }

export default App;

“ Button.js”

import React from 'react';
import { Text, TouchableOpacity } from 'react-native';

const Button = ({ onPress, children }) => {
  const { buttonStyle, textStyle } = styles;

  return (
    <TouchableOpacity onPress={onPress} style={buttonStyle}>
      <Text style={textStyle}>
        {children}
      </Text>
    </TouchableOpacity>
  );
};

const styles = {
  textStyle: {
    alignSelf: 'center',
    color: '#007aff',
    fontSize: 16,
    fontWeight: '600',
    paddingTop: 10,
    paddingBottom: 10
  },
  buttonStyle: {
    flex: 1,
    alignSelf: 'stretch',
    backgroundColor: '#fff',
    borderRadius: 5,
    borderWidth: 1,
    borderColor: '#007aff',
    marginLeft: 5,
    marginRight: 5
  }
};

export { Button };

谢谢。

Answer 1

像这样编辑按钮

 <Button children="Log Out" onPress={() => firebase.auth().signOut()}>           
 </Button>

登录后没有出现注销按钮？

1 个答案: