En su función de renderizado:

 { this.state.showTheThing && <TextInput/> }

Entonces solo haz:

 this.setState({showTheThing: true}) // to show it this.setState({showTheThing: false}) // to hide it

Yo haría algo como esto:

 var myComponent = React.createComponent({ getInitialState: function () { return { showCancel: false, }; }, toggleCancel: function () { this.setState({ showCancel: !this.state.showCancel }); } _renderCancel: function () { if (this.state.showCancel) { return ( <TouchableHighlight onPress={this.toggleCancel()}> <View> <Text style={styles.cancelButtonText}>Cancel</Text> </View> </TouchableHighlight> ); } else { return null; } }, render: function () { return ( <TextInput onFocus={this.toggleCancel()} onChangeText={(text) => this.doSearch({input: text})} /> {this._renderCancel()} ); } });

En reaccionar o reaccionar nativo, la forma en que el componente ocultar/mostrar o agregar/eliminar no funciona como en Android o iOS. La mayoría de nosotros pensamos que habría una estrategia similar como

 View.hide = true or parentView.addSubView(childView)

Pero la forma de reaccionar del trabajo nativo es completamente diferente. La única forma de lograr este tipo de funcionalidad es incluir su componente en su DOM o eliminarlo de DOM.

Aquí, en este ejemplo, voy a configurar la visibilidad de la vista de texto en función del clic del botón.

La idea detrás de esta tarea es crear una variable de estado llamada estado que tenga el valor inicial establecido en falso cuando ocurre el evento de clic del botón y luego cambia el valor. Ahora usaremos esta variable de estado durante la creación del componente.

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

lo único que se debe notar en este fragmento es renderIf que en realidad es una función que devolverá el componente que se le pasó en función del valor booleano que se le pasó.

 renderIf(predicate)(element)

renderif.js

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