Jak usunąć lub odmontować komponent w React Native?

Question

Chcę usunąć komponent w moim React Native kodu, podobnie jak "el.parentNode.removeChild (el)" w JavaScript lub "[view removeFromSuperview]" w Objective-C, ale nie widziałem żadnych powiązanych API w dokumentach odpowiedzi. Czy jest jakiś sposób, aby to zrobić?

Answer 1

W React Native lub ogólnie w React, ponieważ rozumiem, że zazwyczaj nie usuwa się komponentów, wywołując "remove [..]", ale zmieniając znacznik komponentu, zmieniając w ten sposób wirtualny DOM.

Oto przykładowy kod, który usuwa MapView z ekranu.

'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); 

Właściwa część istota:

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

Answer 2

Zazwyczaj nie bezpośrednio odmontować komponentów. W React Native używamy navigator do montowania/odmontowywania komponentów.

Na przykład navigator.pop() "Przejście z powrotem i odmontowanie aktualnej sceny."

I nie jesteś niektóre inne metody, których można użyć, należy sprawdzić Doc: https://facebook.github.io/react-native/docs/navigator.html

Answer 3

Jeśli używasz zindex na dowolnych poglądów, które chcesz usunąć, przepraszam, to nie będzie działać w wszystko od 0.39.0. Skończysz z pustym brzydką skorupą najbliższej gdzie widok kiedyś

Również ten sposób var map = this.state.showMap ? <MapView style={styles.map}/> : null;

może czasem pracy, ale coraz częściej trzeba coś nieco bardziej skomplikowane, więc spróbuj tego:

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) jest ważne. Są też inne sposoby na .bind(this).