React Native:构建登录屏幕 [英] React Native: build Login Screen

问题描述

我刚刚开始使用 React Native，我想知道如何构建一个登录和注册表单共享同一个屏幕.登录和注册标签都显示在一个屏幕上的地方.只需点击任何选项卡，即可打开相同的表格进行填写.请检查下面的视频网址以参考我尝试使用 React Native 实现的目标https://drive.google.com/file/d/1HH2PmZUAhsgBa6iqyt4-uHVvZXIp30H3/view?usp=drivesdk

I am just starting with react native and I want to know How do I build a login and singup form shares same screen. Where both login and singup tabs shows on one screen. Just need to tap on any tab and the same form opens up to fill. Please check the url of video below for reference what I am trying to achieve with React native https://drive.google.com/file/d/1HH2PmZUAhsgBa6iqyt4-uHVvZXIp30H3/view?usp=drivesdk

推荐答案

我已经在设计这种类型的屏幕，我像这样管理更改表单的状态

I'm already designing this type of screen in my case, I manage state for changing form like this

import React from 'react';
import { View, Text, StatusBar, TouchableOpacity, ImageBackground, Image, ScrollView, UIManager, LayoutAnimation, BackHandler  } from 'react-native'
import styles from '../stylesheet/LoginSignup';
import SignupForm from '../components/SignupForm';
import SigninForm from '../components/SigninForm';

export default class Auth extends React.Component {

    static navigationOptions = {
        header: null
    };

    constructor(props)
    {
        super(props);
        this.state = {
            IsOpenTab : 'SignIn',   //  'SignIn', 'SignUp' OR 'ResetPassword'
        };
        UIManager.setLayoutAnimationEnabledExperimental &&
        UIManager.setLayoutAnimationEnabledExperimental(true);
        // LayoutAnimation.spring();
    }

    componentDidMount() {
        BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
    }
    componentWillUnmount() {
        BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);
    }

    handleBackPress = () => {
        return false;
    };

    render() {

        return (

            <ScrollView style={styles.container} keyboardShouldPersistTaps='always'>

                <StatusBar backgroundColor='#2c8ba6' barStyle='light-content' />

                <View style={styles.TopLogoArea}>

                    <ImageBackground source={require('../assets/bg_top.png')} style={styles.TopLogoAreaBackground}>

                        <View style={{paddingTop: 20}}>

                            <Image source={require('../assets/logo.png')} resizeMode='contain' style={{width: 150, height: 150,}}/>

                        </View>

                        <View style={{flexDirection:'row'}}>



                                {
                                    this.state.IsOpenTab === 'SignIn' ? <View style={styles.TabArea}><View style={styles.TabActiveArea}><Text style={styles.TabActiveLable}>SIGN IN</Text><View style={styles.TabActiveLine}/></View></View> : <TouchableOpacity onPress={()=>this.NavigateForm('SignIn')} activeOpacity={0.8} style={styles.TabArea}><Text style={styles.TabDeactiveLable}>SIGN IN</Text></TouchableOpacity>
                                }



                            <View style={styles.TabArea}>

                                <Text style={{color:'#2dc7b0', fontWeight:'bold', fontSize: 12}}>OR</Text>

                            </View>



                                {
                                    this.state.IsOpenTab === 'SignUp' ? <View style={styles.TabArea}><View style={styles.TabActiveArea}><Text style={styles.TabActiveLable}>SIGN UP</Text><View style={styles.TabActiveLine}/></View></View> : <TouchableOpacity onPress={()=>this.NavigateForm('SignUp')} activeOpacity={0.8} style={styles.TabArea}><Text style={styles.TabDeactiveLable}>SIGN UP</Text></TouchableOpacity>
                                }



                        </View>

                    </ImageBackground>

                </View>

                <View style={{paddingVertical:40,}}>

                    {
                        this.state.IsOpenTab === 'SignIn' ? <SigninForm navigation={this.props.navigation} /> : <SignupForm  navigation={this.props.navigation} />
                    }

                </View>


            </ScrollView>

        );
    }

    NavigateForm = (method) => {

        const CustomLayoutLinear = {
            duration: 300,
            create: {
                type: LayoutAnimation.Types.linear,
                property: LayoutAnimation.Properties.opacity,
            },
            update: {
                type: LayoutAnimation.Types.linear,
                property: LayoutAnimation.Properties.opacity,
            },
        };
        LayoutAnimation.configureNext(CustomLayoutLinear );

        if(method === 'SignUp'){
            this.setState({
                IsOpenTab : 'SignUp',
            });
        }else{
            this.setState({
                IsOpenTab : 'SignIn',
            });
        }

    }

}

这篇关于React Native:构建登录屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！