TransWikia.com

Pasar parámetros React native

Stack Overflow en español Asked by Brayan Cortes on November 22, 2021

Estoy utilizando un Flatlist para mostrar los datos de una tabla que tengo en un hosting y al momento de darle clic a uno de los botones me envié a otra pestaña donde me mande el id y la información que pase según corresponda con sigo misma ¿Como puedo hacer esto?

      <View>
        <View style={styles.cuadro}>
        <View style={styles.row}>
            <View style={styles.Izquierda}>
            <Image
        style={{width:200,
            height:180}}
        source={require('../../DiseñoDinamico/img/Hotel.png')}
      />
        <Text>Estrellas {item.Estrellas}
        </Text>
            </View>
            <View style={styles.Derecha}>
        <Text style={{fontSize:40}}>{item.Nombre}</Text>
        <Text style={{fontSize:20}}>Hotel de {item.Estrellas} Estrellas</Text>
        <Text style={{fontSize:15}}>Dir: {item.Direccion}</Text>
        <Text>Tel: {item.Telefono}</Text>
                <TouchableOpacity  onPress={() =>this.props.navigation.navigate('Reservacion',item.idHotel)}><Text style={{textAlign:'right',fontSize:30}} >Reservar una habitacion</Text></TouchableOpacity>
         
        </View>
        </View>  
        </View>
      <Text> </Text>
      </View>
        }/>```

One Answer

lo solucione utilizando getparam

<FlatList  data={this.state.dataSource} renderItem={({item}) => 
  <View>
    <View style={styles.cuadro}>
    <View style={styles.row}>
        <View style={styles.Izquierda}>
        <Image
    style={{width:200,
        height:180}}
    source={require('../../DiseñoDinamico/img/Hotel.png')}
  />
    <Text>Estrellas {item.Estrellas}
    </Text>
        </View>
        <View style={styles.Derecha}>
    <Text style={{fontSize:40}}>{item.Nombre}</Text>
    <Text style={{fontSize:20}}>Hotel de {item.Estrellas} Estrellas</Text>
    <Text style={{fontSize:15}}>Dir: {item.Direccion}</Text>
    <Text>Tel: {item.Telefono}</Text>
            <TouchableOpacity  onPress={() =>this.props.navigation.navigate('Reservacion', {  
        idHotel: item.Estrellas,  
        otherParam: '101',  
    })  
}  ><Text style={{textAlign:'right',fontSize:30}} >Reservar una habitacion</Text></TouchableOpacity>
     
    </View>
    </View>  
    </View>
  <Text> </Text>
  </View>
    }/>

mandando la id de hotel hacia reservación

render() {  
    {/*Using the navigation prop we can get the 
          value passed from the previous screen*/}  
    
    const id_Hotel = this.props.route.params.idHotel
      
    return (  
        <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>  
            <Text style={{ marginTop: 16,fontSize: 20,}}>  
                Hotel 
            </Text>  
            <Text style={styles.textStyle}>Hotel: {JSON.stringify(id_Hotel)}</Text>  
            <View style={styles.buttonStyle}>  
            <Button  
                title="Go back"  
                onPress={() => this.props.navigation.goBack()}  
            />  
            </View>  
        </View>  
    );  
}  

}

Answered by Brayan Cortes on November 22, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP