0

Apenas comienzo en esto de react native, necesito pasar unos parametros y mostrarlos en otra screen pero no he podido ser capaz, este es mi codigo

Esta es un ejemplo de la estructura de mi clase CreatePersonalAccount:

 class CreatePersonalAccount extends React.Component{
        constructor(props) {
            super(props);
            this.state = {
              name:'',
            }
        }
        
        render(){
            return(
              <SafeAreaView>
                 <View>
                   <TextInput
                       onChangeText={(text) => {this.setState({name:text})}}>
                   <TextInput>
                 <View>

                 <View>
                    <TouchableOpacity>
                      <Text>Siguiente</Text>
                    <TouchableOpacity>
                 </View>
              </SafeAreaView>
            );
        }

    }

Esta es mi otra pantalla donde quiero que se muestre el nombre que acabo de guardar en la anterior pantalla, quiero guardarlo en una variable del estado y mostrarla dentro del text de un boton:

class PersonalAccount extends React.Component{
      constructor(props) {
            super(props);
            this.state = {
              name:'', //AQUI QUIERO GUARDARLA SI ES POSIBLE
            }
        }

render(){
  return(
    <SafeAreaView>
      <View>
         <TouchableOpacity>
            <Text> </Text>//AQUI ES DONDE QUIERO MOSTRAR EL NOMBRE
         <TouchableOpacity>
      </View>
    </SafeAreaView>
  );
}
}

De antemano gracias, espero que me puedan ayudar.

1 respuesta 1

1

React como tal es una biblioteca para construir interfaces, tu problema tiene que ver con el manejo del state de la aplicación, para ello normalmente se utiliza otras librerías como Redux, Flux, etc. que gestionan el state.

Con una libreria que gestione el state tu almacenas la información recolectada en una pantalla y la tienes disponible en la siguiente y de hecho esta disponible en toda la aplicación.

Si tu problema es muy puntual y no quieres utilizar alguna de estas librerias entonces deberías considerar almacenar la información en el state de un componente padre común a las dos pantallas y desde aquí gestionar el state compartido entre las dos pantallas.

class Wizzard extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            sharedName: null
        }
    }

    handleCallback = (childData) =>{
        this.setState({sharedName: childData})
    }

    render(){
        const {sharedName} = this.state;
        return(
            <View>
                <CreatePersonalAccount parentCallback={this.handleCallback}/>
                <PersonalAccount name={sharedName}/>
            </View>
        )
    }
}

class CreatePersonalAccount extends React.Component{

    _onPress = (event) => {
        const {nameEntered} = this.state;
        this.props.parentCallback(nameEntered);
    }

    render(){
        return(
            <View>
                <TextInput onChangeText={(text) => {this.setState({nameEntered:text})}}/>
                <Button onPress={this._onPress}/>
            </View>
        )
    }
}

class PersonalAccount extends React.Component{
    render(){
        const {name} = this.props;
        return(
            <View>
                <Text>Name:</Text>
                <Text>{name}</Text>
            </View>
        );
    }
}

Lo que te faltaría es manejar la transición de la primera pantalla a la siguiente

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.