如何刪除或卸載React Native中的組件？

Question

我想在我的React Native代碼中刪除一個組件，就像JavaScript中的「el.parentNode.removeChild（el）」或Objective-C中的「[view removeFromSuperview]」，但我沒有看到任何相關的API在React文檔中。有什麼辦法可以做到嗎？

Answer 1

在React Native或通常在React中，正如我所瞭解的，通常不會通過調用'remove [..]'來移除組件，而是通過更改組件的標記來更改虛擬DOM。

下面是一些示例代碼，用於刪除屏幕的MapView。

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

相關的部分是：

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

Answer 2

通常我們不直接卸載的組件。 在React Native中，我們使用navigator來裝載/卸載組件。例如，navigator.pop()將「過渡並卸載當前場景」。

，這兒有，你可以使用，請檢查文檔的一些其他的方法：如果你對任何要刪除您的視圖中使用zIndex的https://facebook.github.io/react-native/docs/navigator.html

Answer 3

，對不起，它不會在工作全部爲0.39.0。你最終會與附近使用你的看法，其中一個空白醜陋外殼是

而且這種方法 var map = this.state.showMap ? <MapView style={styles.map}/> : null;

有時可以工作，但更多的時候，你需要一些更復雜，所以試試這個：

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)很重要。還有其他方式.bind(this)。