如何使我的图像停留在一页上而不重复？

Posted 2023-03-14

【中文标题】如何使我的图像停留在一页上而不重复？

【英文标题】：How do I make my image stay on one page and not repeat itself?

【发布时间】：2017-07-06 16:22:45

【问题描述】：

我想在我的练习应用的主屏幕上添加一张图片。该图像在主屏幕上是完美的，但是每当我单击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);

【参考方案1】：

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

所以你会得到一个Login 类和一个SignUp 类，这也意味着你不需要 if else 结构和更简洁的代码。