Come rimuovere o smontare un componente in React Native?

Question

Voglio rimuovere un componente nel mio codice React Native, proprio come "el.parentNode.removeChild (el)" in JavaScript o "[view removeFromSuperview]" in Objective-C, ma non ho visto alcuna API correlata in documenti React. C'è un modo per farlo?

Answer 1

In React Native o in generale in React come ho capito, normalmente non rimuovi i componenti chiamando "remove [..]" ma cambiando il markup del componente, modificando quindi il DOM virtuale.

Ecco un esempio di codice che rimuove un MapView di uno schermo.

'use strict'; 

var React = require('react-native'); 
var { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    SwitchIOS, 
    MapView, 
} = React; 

var TestMap = React.createClass({ 

    getInitialState() { 
    return { 
     showMap: true, 
    }; 
    }, 

    render: function() { 
    var map = this.state.showMap ? <MapView style={styles.map}/> : null; 
    return (
     <View style={styles.container}> 
     <Text style={{marginBottom: 10}}>Remove a view in React Native</Text> 
     <SwitchIOS 
      onValueChange={(value) => this.setState({showMap: value})} 
      style={{marginBottom: 10}} 
      value={this.state.showMap} 
      /> 
     {map} 
     </View> 
    ); 
    } 
}); 

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    marginTop: 50, 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    }, 
    map: { 
    height: 200, 
    width: 300, 
    margin: 10, 
    borderWidth: 1, 
    borderColor: '#000000', 
    }, 

}); 

AppRegistry.registerComponent('TestMap',() => TestMap); 

La parte rilevante dell'essere:

render: function() { 
    var map = this.state.showMap ? <MapView style={styles.map}/> : null; 
    return (
     <View style={styles.container}> 
     [..] 
     {map} 
     </View> 
    ); 
    } 

Answer 2

Di solito non smontare direttamente i componenti. In React Native, utilizziamo navigator per montare/smontare i componenti.

Ad esempio, navigator.pop() "Transizione indietro e smonta la scena corrente".

E ci sono alcuni altri metodi che è possibile utilizzare, consultare il documento: https://facebook.github.io/react-native/docs/navigator.html

Answer 3

Se stai usando zIndex su uno qualsiasi dei vostri punti di vista che si desidera rimuovere, mi dispiace, non funzionerà a tutto a partire da 0.39.0. Vi ritroverete con un brutto guscio vuoto vicino a dove la vostra vista usato per essere

Anche questo metodo var map = this.state.showMap ? <MapView style={styles.map}/> : null;

a volte può funzionare, ma più spesso è necessario qualcosa di un po 'più complesso, in modo da provare questo:

render() { 
     var cUsers = function() { 
     if (this.props.somePropety) { 
      return (<SomeSpecialView/>) 
     } else { 
      return null // or something like (<Text>Some other view</Text>) 
     } 
     }.bind(this) 
     return (
     <View style={style.container}> 
      {cUsers()} 
     </View> 
    ) 
    } 

bind(this) è importante. Ci sono altri modi per .bind(this), anche.