Estoy tratando de mostrar un modal cuando se hace clic en un elemento de la lista. Establecí el estado en falso inicialmente, luego, cuando se hace clic en un elemento de la lista, establece el estado setModalVisible en verdadero y debería mostrarse el modal. Sin embargo, aunque el estado es verdadero, verificado por la depuración, el modal no se muestra.
Estado inicial
this.state = { setModalVisible: false, };Elemento de la lista de procesamiento y alternar enPress
renderItem(item) { return ( <ListItem bottomDivider={true} onPress={() => this.showModal(item)}> <View style={{flex: 1}} margin={5}> <Avatar margin={5} rounded source={{uri: item.logo_url}} /> <View style={{flexDirection: 'row'}}> <Text margin={50}>{item.rank}</Text> <Text margin={50} style={styles.cryptoTitle}> {item.name} </Text> <Text style={styles.cryptoPrice}> {'$' + item.price} </Text> </View> </View> </ListItem> ); }Mostrar función modal
showModal(item) { this.setState({setModalVisible: true}); return ( <View> <Modal animationType="slide" visible={this.state.setModalVisible} onRequestClose={() => { this.setState({setModalVisible: false}); }}> <Text> Modal is Visible !</Text> </Modal> </View> ); }No agregó el Modal en el elemento. Devolver el modal dentro del método onPress no lo agregaría al árbol:
renderItem(item) { return ( <View> <ListItem bottomDivider={true} onPress={() => this.showModal(item)}> <View style={{flex: 1}} margin={5}> <Avatar margin={5} rounded source={{uri: item.logo_url}} /> <View style={{flexDirection: 'row'}}> <Text margin={50}>{item.rank}</Text> <Text margin={50} style={styles.cryptoTitle}> {item.name} </Text> <Text style={styles.cryptoPrice}> {'$' + item.price} </Text> </View> </View> </ListItem> {this.state.setModalVisible ? <Modal // put the modal somewhere suitable animationType="slide" visible={this.state.setModalVisible} onRequestClose={() => { this.setState({setModalVisible: false}); }}> <Text> Modal is Visible !</Text> </Modal> : null} </View> ); } Luego showModal simplemente actualiza el estado:
showModal(item) { this.setState({setModalVisible: true}); }Primero, la devolución de llamada pasada a onPress no representará el jsx que está devolviendo.
El mejor enfoque es actualizar el estado y, en función del nuevo, renderizar elementos.
showModal(item) { this.setState({ selectedItem : item }); } // render the modal somewhere in the parent component <View> <List /> {selectedItem && ( <Modal animationType="slide" visible={!!this.state.selectedItem} onRequestClose={() => this. setState({ selectedItem : null})}> <Text> Modal is Visible !</Text> </Modal> )} </View>