Question

我想在我的React Native代码中删除一个组件，就像＆＃34; el.parentNode.removeChild（el）＆＃34;在JavaScript或＆＃34; [查看removeFromSuperview]＆＃34;在Objective-C中，但我没有在React文档中看到任何相关的API。有没有办法实现呢？

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

如果您在要移除的任何视图上使用zIndex，抱歉，从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)还有其他方式。

Answer 3

通常我们不直接卸载组件。在React Native中，我们使用navigator来安装/卸载组件。

例如，navigator.pop()将“转发并卸载当前场景。”

您可以使用其他一些方法，请查看文档：{{3}}

如何在React Native中删除或卸载组件？

3 个答案: