我的 TouchableOpacity 在本机反应中不起作用

Question

I have just started React-Native. But here my TouchableOpacity is not working.please check the code

import React, { Component } from 'react'
import { View, Text , StyleSheet, TouchableOpacity, TouchableNativeFeedback } from 'react-native'
import firebase from 'firebase'

    class Article extends Component {

        handleOnPress = () => {
            firebase.auth().signOut();
          }
        render(){
        return (

            <View style={styles.container}>
                <View >
                    <Text>You are logged in </Text>

                    <TouchableOpacity style={styles.buttonContainer}
                    onPress={this.handleOnPress}>
                        <Text>Log Out</Text>
                    </TouchableOpacity>
                </View>

            </View>
        )}
    }

    export default Article

    const styles = StyleSheet.create({
        container:{
            flex:1,
            justifyContent:'center',
            alignItems:'center',
            backgroundColor:'red'
            },
            button:{
                color:'white',
                justifyContent:'center',
                alignItems:'center',
                textAlign:'center',
                fontWeight:'bold',
                fontSize:25
            },

            buttonContainer:{
                backgroundColor:'green',
                color:'white',
                padding:10,
                borderRadius:8,
                width:300,
                height:50,
                textAlign:'center',
                padding:10,
                alignSelf:'center',
                marginTop:50
            }        
        }
    )

Answer 1

Try this:

import React, { Component } from 'react'
import { View, Text , StyleSheet, TouchableOpacity} from 'react-native'
import firebase from 'firebase'

export default class Article extends Component {
  handleOnPress = () => {
    alert('Called') //just to see if the function it's called
    firebase.auth().signOut();
  }

 render() {
   return (
      <View style={styles.container}>
        <Text>You are logged in </Text>
        <TouchableOpacity style={styles.buttonContainer} onPress={this.handleOnPress}>
            <Text>Log Out</Text>
        </TouchableOpacity>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container:{
      flex:1,
      justifyContent:'center',
      alignItems:'center',
      backgroundColor:'red'
    },
    button:{
      color:'white',
      justifyContent:'center',
      alignItems:'center',
      textAlign:'center',
      fontWeight:'bold',
      fontSize:25
    },
    buttonContainer:{
      backgroundColor:'green',
      color:'white',
      padding:10,
      borderRadius:8,
      width:300,
      height:50,
      textAlign:'center',
      padding:10,
      alignSelf:'center',
      marginTop:50
    }   
})