React Native：构建登录屏幕

Question

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

Answer 1

你可以在状态中使用一些东西作为标志，例如，如果你触摸登录，标志变为真，如果你触摸登录，标志变为假，这样你可以显示 2 个屏幕

Answer 2

在我的案例中，我已经在设计这种类型的屏幕，我像这样管理状态以更改形式

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：构建登录屏幕

React Native: build Login Screen

javascript

react-native

react-redux

react-navigation

react-native-fbsdk