Question

我跟随video tutorial在带有expo的React应用程序中添加了身份验证。问题是2个按钮“登录”和“注册”不显示

你能告诉我为什么吗？有时当元素尚未收费时会出现此类问题，但我不明白为什么会出现这种情况。

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

export default class Login extends React.Component {

    state = {
            email:'', 
            password:'', 
            error:'',
            loading:false
    };

    onLoginPress(){
        this.state({error:'', loading:true});
        firebase.auth().signInWithEmailAndPassword(email, password)
        .then(()=>{
            this.state({error:'',loading:false})
            this.props.navigation.navigater('Home')
        })
        .catch (()=> {
            this.state({error:"authentif faild", loading:false});
        })
    }

    onSignUpPress(){
        this.state({error:'', loading:true});
        firebase.auth().createWithEmailAndPassword(email, password)
        .then(()=>{
            this.state({error:'',loading:false})
            this.props.navigation.navigater('Home')
        })
        .catch (()=> {
            this.state({error:"authentif faild", loading:false});
        })
    }

    renderButtonOrLoading(){
        if(this.state.loading) {
            return <Text> Loading </Text>
        }
        return 
            <View>
            <Text> Loading </Text>
                <Button
                    onPress={this.onLoginPress.bind(this)}
                    title='Log In'/>
                <Button
                    onPress={this.onSignUpPress.bind(this)}
                    title="Sign Up"/> 
            </View>
    }

    render() {
        return(
            <View>
                    <FormLabel>Email</FormLabel>
                    <FormInput onChangeText={email => this.setState({email})}/>             
                    <FormLabel>Password</FormLabel>
                    <FormInput onChangeText={password => this.setState({password })}/>
                    {this.renderButtonOrLoading()}  
            </View>         
        )
    }

}

Answer 1

在圆括号中返回登录名和注册按钮视图

return (
         <View>
            <Button
               onPress={this.onLoginPress.bind(this)}
               title='Log In'/>
            <Button
                onPress={this.onSignUpPress.bind(this)}
                title="Sign Up"/> 
         </View>
)

Answer 2

我认为您错过了为返回方法添加圆括号的方法。

renderButtonOrLoading(){
        if(this.state.loading) {
            return <Text> Loading </Text>
        }
        return (
            <View>
            <Text> Loading </Text>
                <Button
                    onPress={this.onLoginPress.bind(this)}
                    title='Log In'/>
                <Button
                    onPress={this.onSignUpPress.bind(this)}
                    title="Sign Up"/> 
            </View>
        )
    }

Answer 3

我相信这是因为您在返回时缺少（）

 renderButtonOrLoading(){
        if(this.state.loading) {
            return <Text> Loading </Text>
        }
        return (
            <View>
            <Text> Loading </Text>
                <Button
                    onPress={this.onLoginPress.bind(this)}
                    title='Log In'/>
                <Button
                    onPress={this.onSignUpPress.bind(this)}
                    title="Sign Up"/> 
            </View>
       )
}

渲染时不显示的按钮

3 个答案: