При реагировании или реагировании нативный способ скрытия / отображения или добавления / удаления компонента не работает, как в Android или iOS. Большинство из нас думает, что могла бы быть похожая стратегия вроде
View.hide = true or 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(predicate)(element)
renderif.js
'use strict';
const isFunction = input => typeof input === 'function';
export default predicate => elemOrThunk =>
predicate ? (isFunction(elemOrThunk) ? elemOrThunk() : elemOrThunk) : null;
