如何让我的图片保留在一页上而不重复？

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结构和更干净的代码。