[解決済み] react nativeでコンポーネントを隠す/表示する

質問

私は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 .

また、ボタンを最初から非表示にするにはどうしたらよいでしょうか。

解決方法は？

私なら、こんな風にします。

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

});