在react native中隐藏/显示组件

Question

我对React Native非常陌生，我想知道如何隐藏/显示组件
这是我的测试用例：

<TextInput
    onFocus={this.showCancel()}
    onChangeText={(text) => this.doSearch({input: text})} />

<TouchableHighlight 
    onPress={this.hideCancel()}>
    <View>
        <Text style={styles.cancelButtonText}>Cancel</Text>
    </View>
</TouchableHighlight>

我有一个TextInput组件，我想要的是当输入获得焦点时显示TouchableHighlight，然后当用户按下取消按钮时隐藏TouchableHighlight。

我不知道如何“访问”TouchableHighlight组件，以便在我的函数中隐藏/显示它showCancel/hideCancel
另外，如何从一开始就隐藏按钮？

Answer 1

在react或react native中，组件隐藏/显示或添加/删除的方式与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)

伦德里夫。js

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

Answer 2

我会这样做：

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

});

Answer 3

在渲染函数中：

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

那么就做：

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