Программно добавьте компонент в React Native

в react или react native способ скрыть/показать или добавить/удалить компонент не работает, как в android или iOS. Большинство из нас думает, что было бы подобное stratedgy, как

вид.hide = true или parentView.addSubView (childView

но способ реагировать на родную работу совершенно другой. Единственный способ получить такую функциональность-включить компонент в DOM или удалить его из DOM.

вот в этом примере я установите видимость представления текста на основе нажатия кнопки.

Введите описание изображения здесь

идея этой задачи-создать переменную состояния, называемую state, имеющую начальное значение false, когда происходит событие нажатия кнопки, а затем переключается значение. Теперь мы будем использовать эту переменную состояния при создании компонента.

import renderIf from './renderIf'

class fetchsample extends Component {
  constructor(){
    super();
    this.state ={
      status:false
    }
  }
  toggleStatus(){

  this.setState({
    status:!this.state.status
  });
  console.log('toggle button handler: '+ this.state.status);
  }

  render() {
    return (
      <View style={styles.container}>
       {renderIf(this.state.status)(
         <Text style={styles.welcome}>
         I am dynamic text View
         </Text>
       )}

        <TouchableHighlight onPress={()=>this.toggleStatus()}>
          <Text> touchme </Text>
        </TouchableHighlight>
      </View>
    );
  }
}

единственное, что нужно заметить в этом фрагменте, - это renderIf, который на самом деле функция, которая вернет переданный ей компонент на основе переданного ему логического значения.

renderIf (предикат) (элемент).

renderif.js

'use strict';
const isFunction = input => typeof input === 'function';
export default predicate => elemOrThunk =>
  predicate ? (isFunction(elemOrThunk) ? elemOrThunk() : elemOrThunk) : null;

С компонентами React вы не хотите думать о действиях, достигающих DOM и вставляющих компоненты-вы хотите думать о компонентах отвечает действия. Теоретически этот компонент уже составлен и готов, ему просто нужно знать, Следует ли его визуализировать или нет:

var ReactProject = React.createClass({
  getInitialState() {
    // our *state* dictates what the component renders
    return {
      show: false
    };
  }
  _onPressOut: function() {
    // update our state to indicate our "maybe" element show be shown
    this.setState({show: !this.state.show});
  },
  maybeRenderElement() {
    if (this.state.show) {
      // depending on our state, our conditional component may be part of the tree
      return (
        <Text>Yay!</Text>
      );
    }
    return null;
  }
  render() {
    return (
      <View>
        <Text>This text should be before</Text>
        {this.maybeRenderElement()}
        <Text>This text should be after</Text>
        <TouchableHighlight onPressOut={this._onPressOut}>
          <Text>Tap Me</Text>
        </TouchableHighlight>
      </View>
    );
  }
});

Я также сделал помощник, который позволяет легко условно отображать вещи,render-if

renderIf(this.state.show)(
  <Text>Yay</Text>
)

синтаксис ECMA6

import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,    
TextInput,
TouchableOpacity,
TouchableHighlight
} from 'react-native';    

export default class fourD extends Component {

  constructor(props) {
    super(props);
    let ele1 = (
      <View key={1}>
        <Text>Element {1}</Text>
        <TouchableOpacity onPress={ () => this._add()  }>
         <Text>Add</Text>
        </TouchableOpacity>
      </View>
     );

    this.state = {
      ele: [],
      key: 1
    }

    this.state.ele.push(ele1);

   }

  _add(){

    let key = this.state.key + 1;

    let ele2 = (
      <View key={key}>
        <Text>Element {key}</Text>
        <TouchableOpacity onPress={ () => this._add()  }>
         <Text>Add</Text>
        </TouchableOpacity>
      </View>
    );

    let ele = this.state.ele;
    ele.push(ele2);
    this.setState({ ele: ele,key : key})

  }
  render() {

    return (
      <View style={styles.container}>
       <Text>This text should be before</Text>
        { this.state.ele }
       <Text>This text should be after</Text>
       <TouchableHighlight onPressOut={ () => this._add()  }>
          <Text>Tap Me</Text>
        </TouchableHighlight>
      </View>
    )
  }
}



const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: "white",
    }
})