Question

我想在我的练习应用的主屏幕上添加图片。图像在主屏幕上是完美的，但每当我点击SignUp时，应用切换到下一个屏幕并带上图像，并在屏幕上水平重复出现相同图像的图案。

这是Login.js：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { ScrollView, Image, Text, TextInput, View, Button, StyleSheet } from 'react-native';
import { login } from '../redux/actions/auth';
import {AuthenticationDetails, CognitoUser, CognitoUserAttribute, CognitoUserPool} from '../lib/aws-cognito-identity';

const awsCognitoSettings = {
    UserPoolId: '',
    ClientId: ''
};

class Login extends Component {
    constructor (props) {
        super(props);
        this.state = {
            page: 'Login',
            username: '',
            password: ''
        };
    }

    get alt () { return (this.state.page === 'Login') ? 'SignUp' : 'Login'; }

    handleClick (e) {
        e.preventDefault();
        const userPool = new CognitoUserPool(awsCognitoSettings);

        // Sign up
        if (this.state.page === 'SignUp') {
            const attributeList = [
                new CognitoUserAttribute({ Name: 'email', Value: this.state.username })
            ];
            userPool.signUp(
                this.state.username,
                this.state.password,
                attributeList,
                null,
                (err, result) => {
                    if (err) {
                        alert(err);
                        this.setState({ username: '', password: '' });
                        return;
                    }
                    console.log(`result = ${JSON.stringify(result)}`);
                    this.props.onLogin(this.state.username, this.state.password);
                }
            );
        } else {
            const authDetails = new AuthenticationDetails({
                Username: this.state.username,
                Password: this.state.password
            });
            const cognitoUser = new CognitoUser({
                Username: this.state.username,
                Pool: userPool
            });
            cognitoUser.authenticateUser(authDetails, {
                onSuccess: (result) => {
                    console.log(`access token = ${result.getAccessToken().getJwtToken()}`);
                    this.props.onLogin(this.state.username, this.state.password);
                },
                onFailure: (err) => {
                    alert(err);
                    this.setState({ username: '', password: '' });
                    return;
                }
            });
        }
    }

    togglePage (e) {
        this.setState({ page: this.alt });
        e.preventDefault();
    }

    render() {
        return (
            <ScrollView style={{padding: 20}}>
                <View>
                    <Image
                        source={require('../pictures/icon.png')}
                    />
                </View>

                <TextInput
                    style={styles.pw}
                    placeholder=' Email Address'
                    autoCapitalize='none'
                    autoCorrect={false}
                    autoFocus={true}
                    keyboardType='email-address'
                    value={this.state.username}
                    onChangeText={(text) => this.setState({ username: text })} />

                <TextInput
                    style={styles.pw}
                    placeholder=' Password'
                    autoCapitalize='none'
                    autoCorrect={false}
                    secureTextEntry={true}
                    value={this.state.password}
                    onChangeText={(text) => this.setState({ password: text })} />

                <View style={{margin: 7}}/>
                    <Button onPress={(e) => this.handleClick(e)} title={this.state.page}/>
                    <View style={{margin: 7, flexDirection: 'row', justifyContent: 'center'}}>
                        <Text onPress={(e) => this.togglePage(e)} style={styles.buttons}>
                            {this.alt}
                        </Text>
                </View>

            </ScrollView>
        );
    }
}

const styles = StyleSheet.create({
    title: {
        fontSize: 27,
        textAlign: 'center'
    },

    pw: {
        paddingRight: 90,
        justifyContent: 'flex-end',
        marginBottom: 20,
        backgroundColor: '#9b42f4',
        height: 40,
        borderWidth: 1,
        borderRadius: 5
    },

    buttons: {
        fontFamily: 'AvenirNext-Heavy'
    }
});

const mapStateToProps = (state, ownProps) => {
    return {
        isLoggedIn: state.auth.isLoggedIn
    };
}

const mapDispatchToProps = (dispatch) => {
    return {
        onLogin: (username, password) => { dispatch(login(username, password)); }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Login);

Answer 1

可能是因为你的渲染函数用于2页状态，我认为你需要创建一个SignUp类（我不熟悉反应）。

所以你得到的是Login课程和SignUp课程，也意味着你不需要if else结构和更清晰的代码。

如何让我的图像保持在一个页面而不重复？

1 个答案: