Как удалить или размонтировать компонент в React Native?

Ответ 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>
    );
  }

Ответ 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).

Ответ 3

Обычно мы не размонтируем компоненты напрямую. В React Native мы используем navigator для монтирования/размонтирования компонентов.

Например, navigator.pop() будет "Переход назад и размонтирование текущей сцены".

И есть другие способы, которые вы можете использовать, пожалуйста, проверьте документ: https://facebook.github.io/react-native/docs/navigator.html