登录后未显示注销按钮

Question

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

用户登录后，我希望他们使用按钮注销，但不幸的是，该按钮不可见，只有文本出现在屏幕上。

"应用.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;

"按钮.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>