Блог

Я пытаюсь вызвать свой emailInput и отобразить его на моей странице createPassword, в частности, где youremail@email.com есть. Я привел две страницы ниже: страницу электронной почты, состоящую из пользовательского ввода, и страницу пароля, на которой я хочу, чтобы этот пользовательский ввод отображался. Я не могу по-настоящему разобраться в том, как ссылаться на входные данные в моем onPress. Любое понимание вообще ценится больше, чем вы думаете!

Кроме того, могу ли я вот так позвонить двум onpress’ам? Или мне нужно создать две функции и сделать это таким образом?

SignUpEmail.js

 export default class SignUpEmailPage extends Component {
  
  constructor() {
    super();

    this.state = {
      color1: '#A2A2A2'};}
  
  render() {
    return (
        <View style={styles.containerMain}>
        
        {/* Email Input */}
      <Container style = {styles.emailInput}>
        
        <Form>
          <Item floatingLabel >
            <Label style={{color:this.state.color1}}>Email Address</Label>
                <Input
                style={styles.textInput}
                autoCorrect={false}
                autoCapitalize="none"
                onFocus={() => this.setState({color1: '#F7018D'})}               
                onBlur={() => this.setState({color1: '#A2A2A2'})}
                />
          </Item>
        </Form>
      </Container>


<View style={styles.containerBottom}>   
      <ContinueButton
       
      onPress = {() => navigation.navigate('CreatePassword', { emailInput:  })}
      onPress={() => this.props.navigation.navigate('CreatePassword')}
      /> 
      </View>
 

CreatePassword.js

 export default class CreatePasswordPage extends Component {

  constructor() {
    super();

    this.state = {
      color1: '#A2A2A2'};}
  
  render() {
    return (
        <View style={styles.containerMain}>
       
         {/* Password Input */}
      <Container style = {styles.passwordInput}>
        
        <Form>
          <Item floatingLabel>
           <Label style={{color:this.state.color1}}>Password</Label>
              <Input
                style={styles.textInput}
                autoCorrect={false}
                autoCapitalize="none"
                secureTextEntry={true}
                onFocus={() => this.setState({color1: '#F7018D'})}
                
                onBlur={() => this.setState({color1: '#A2A2A2'})}
         
              />
         </Item>
       </Form>
      </Container>

        <View style={styles.containerHeader}>
        <Text style={styles.title}>Create a Password</Text>
        </View>
        
      <View style={styles.containerCaption}>   
        <Text style={styles.caption}> Lets create your Password for 
 
        </Text> 
      </View>
      <View style={styles.containerCaption2}>   
        <Text style={styles.caption}> youremail@email.com</Text> 
      </View>

      

      <View style= {styles.backArrowPlacement}>
      <BackArrow 
      onPress={() => this.props.navigation.navigate('SignUpEmail')} 
      />
      </View>
      
      <View style={styles.containerBottom}>   
      <ContinueButton
      onPress={() => this.props.navigation.navigate('PhoneVerification')} 
      /> 
      </View>
    </View>

    );
    }
}
 

Вы не можете использовать navigation.navigate , поскольку для этого требуется реализация Hooks в функциональном компоненте. Вы можете сделать это

 export default class SignUpEmailPage extends Component {

    constructor() {
        super();

        this.state = {
            color1: '#A2A2A2',
            inputValue: '', // add state here
        };
    }

    updateInputValue = (evt) => {
        this.setState({
            inputValue: evt.target.value
        });
    }

    render() {
        return ( 
            <Input 
             value = {this.state.inputValue}
              onChange={this.updateInputValue }
            />           
            <ContinueButton
               //onPress = {() => navigation.navigate('CreatePassword', { emailInput:  })} // remove this
               onPress={() => this.props.navigation.navigate('CreatePassword',{ emailInput: this.state.inputValue })} // use this like
            />

        )
    }
}