Question

我有两个带有两个不同屏幕的不同文档。在第一个屏幕上验证电子邮件之后，我现在可以转到第二个屏幕。但是，我想返回第一个屏幕。 React Navigation 5.x文档中提到的方法都不适合我。

这是App.js上的代码：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import firebase from './firebase';
import * as EmailValidator from 'email-validator';
import { HitTestResultTypes } from 'expo/build/AR';
import logo from './assets/Circulo.png';
import AgeInput from './AgeInput';

// Clase que representa el diseño de la pantalla inicial de la app
class HomeScreen extends Component {
  state = { username: null, password: null, nonValidInput: null }

  _onSubmit = ({ navigation }) =>{
    if(EmailValidator.validate(this.state.username) == true) {
      this.setState({ nonValidInput: false });
      const { username, password } = this.state;

      try {
        // THIS IS WHERE I GO TO THE SECOND SCREEN
        firebase.auth().signInWithEmailAndPassword(this.state.username, this.state.password).then(() => this.props.navigation.navigate('Age'));
      } catch {
        Alert.alert(
          'Error',
          'Los datos no son correctos',
          [
            { text: 'Ok' }
          ],
          { cancelable: false }
        );
      }

    } else { 
      this.setState({ nonValidInput: true });
    }
  }

  render() {
    return (
      <KeyboardAwareScrollView contentContainerStyle={styles.container} scrollEnabled 
      enableOnAndroid={true} resetScrollToCoords={{x:0, y:0}}> 
        <View style={styles.logo}>
          <Image source = {logo} style={styles.img}/>
          <Text style={styles.textLogoPrimary}>Neuron App</Text>
          <Text style={styles.textLogoSecondary}>Test</Text>
        </View>

        <View style={styles.formElement}>
          <Text style={styles.formText}>Correo Electrónico</Text>
          <TextInput keyboardType='email-address' placeholder='Email' onChangeText={value => this.setState({ username: value })} 
          style={styles.formInput} />
          {this.state.nonValidInput ? (
            <Text style={styles.textAlert}>Correo electrónico no valido.</Text> 
          ) : null}       
        </View>

        <View style={styles.formElement}>
          <Text style={styles.formText}>Contraseña</Text>
          <TextInput style={styles.formInput} placeholder='Contraseña' onChangeText={value => this.setState({ password: value })} 
          secureTextEntry={true}/>
        </View>

        <View style={styles.buttonView}>
          <TouchableOpacity style={styles.button} onPress={this._onSubmit}>
            <Text style={styles.buttonText}>Iniciar</Text>
          </TouchableOpacity>
        </View>     
      </KeyboardAwareScrollView>
    );
  }
}

const Stack = createStackNavigator();

class App extends Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator screenOptions={{headerShown: false}} initialRouteName="Home">
          <Stack.Screen name='Home' component={HomeScreen} />
          <Stack.Screen name='Age' component={AgeInput} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

这是AgeInput.js

上的代码

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Home from './App';

class App extends Component { // AgeInput
  state = { date: null, edad: null, day: null, month: null, year: null }

  _ageCalc = () => {
    if(this.state.day < 32 && this.state.day > 0 && this.state.month < 13 && this.state.month > 0 && this.state.year != 0) {
      var fecha = Date.parse(this.state.year + '-' + this.state.month + '-' + this.state.day);

      var hoy = new Date();
      var fechaNacimiento = new Date(fecha);
      var edad_ahora = hoy.getFullYear() - fechaNacimiento.getFullYear();
      var mes = hoy.getMonth() - fechaNacimiento.getMonth();

      if (mes < 0 || (mes === 0 && hoy.getDate() < fechaNacimiento.getDate())) {
        edad_ahora--;
      }

      this.setState({ edad: edad_ahora });
    } else {
      Alert.alert(
        'Error',
        'Por favor introduce una fecha valida',
        [
          { text: 'Ok' }
        ],
        { cancelable: false },
      );
    }
  }

  render () {
    return (
      <KeyboardAwareScrollView contentContainerStyle={styles.container} scrollEnabled enableOnAndroid={true} 
      resetScrollToCoords={{x:0, y:0}}>
        <View style={styles.topView}>
          // This is the button I press to go back to the first screen
          <TouchableOpacity style={styles.img} onPress={() => this.props.navigator.navigate('Home')}>
            <Image source={flecha} />
          </TouchableOpacity>
          <View style={styles.topTextWrapper}>
            <Text style={styles.topTextPrimary}>Bienvenido a Neuron</Text>
              <Text style={styles.topTextSecondary}>¿O no?</Text>
            </View>
        </View>

        <View style={styles.middleView}>
          <Text style={styles.formText}>Fecha de nacimiento</Text>
          <View style={styles.formRow}>
            <View style={styles.textInputWrapper}>
              <TextInput style={styles.formInput} placeholder='DD' keyboardType='number-pad' 
              onChangeText={ value => this.setState({ day: value }) }/>
            </View>
            <View style={styles.textInputWrapper}>
              <TextInput style={styles.formInput} placeholder='MM' keyboardType='number-pad' 
              onChangeText={ value => this.setState({ month: value }) }/>
            </View>
            <View style={styles.textInputWrapper}>
              <TextInput style={styles.formInput} placeholder='AA' keyboardType='number-pad' 
              onChangeText={ value => this.setState({ year: value }) }/>
            </View>
          </View>                
        </View>

        <View style={styles.buttonView}>
          <TouchableOpacity style={styles.button} onPress={this._ageCalc}>
            <Text style={styles.buttonText}>CALCULAR EDAD</Text>
          </TouchableOpacity>
        </View>

        <View style={styles.ageView}>
          <Text style={styles.ageTextPrimary}>Tu edad es:</Text>
          <Text style={styles.ageNumber}>{this.state.edad}</Text>
          <Text style={styles.ageTextSecondary}>Años</Text>
        </View>
      </KeyboardAwareScrollView>
    );
  }
}

export default App; // AgeInput

感谢您的帮助

Answer 1

您可以执行以下操作...

 render () {
 const { navigate } = props.navigation;
     //function to go to next screen
     goToNextScreen = () => {
         return navigate('Home');
    return (
      <KeyboardAwareScrollView contentContainerStyle={styles.container} scrollEnabled enableOnAndroid={true} 
      resetScrollToCoords={{x:0, y:0}}>
        <View style={styles.topView}>
          // This is the button I press to go back to the first screen
          <TouchableOpacity style={styles.img} onPress={() => this.goToNextScreen()}>
            <Image source={flecha} />
          </TouchableOpacity>
          <View style={styles.topTextWrapper}>
            <Text style={styles.topTextPrimary}>Bienvenido a Neuron</Text>
              <Text style={styles.topTextSecondary}>¿O no?</Text>
            </View>
        </View>

        <View style={styles.middleView}>
          <Text style={styles.formText}>Fecha de nacimiento</Text>
          <View style={styles.formRow}>
            <View style={styles.textInputWrapper}>
              <TextInput style={styles.formInput} placeholder='DD' keyboardType='number-pad' 
              onChangeText={ value => this.setState({ day: value }) }/>
            </View>
            <View style={styles.textInputWrapper}>
              <TextInput style={styles.formInput} placeholder='MM' keyboardType='number-pad' 
              onChangeText={ value => this.setState({ month: value }) }/>
            </View>
            <View style={styles.textInputWrapper}>
              <TextInput style={styles.formInput} placeholder='AA' keyboardType='number-pad' 
              onChangeText={ value => this.setState({ year: value }) }/>
            </View>
          </View>                
        </View>

        <View style={styles.buttonView}>
          <TouchableOpacity style={styles.button} onPress={this._ageCalc}>
            <Text style={styles.buttonText}>CALCULAR EDAD</Text>
          </TouchableOpacity>
        </View>

        <View style={styles.ageView}>
          <Text style={styles.ageTextPrimary}>Tu edad es:</Text>
          <Text style={styles.ageNumber}>{this.state.edad}</Text>
          <Text style={styles.ageTextSecondary}>Años</Text>
        </View>
      </KeyboardAwareScrollView>
    );
  }
}

export default App;

Answer 2

只需替换一下：

// This is the button I press to go back to the first screen
          <TouchableOpacity style={styles.img} onPress={() => this.props.navigator.navigate('Home')}>

与

// This is the button I press to go back to the first screen
          <TouchableOpacity style={styles.img} onPress={() => this.props.navigation.navigate('Home')}>

希望对您有帮助。

导航回到开始屏幕

2 个答案: