如何在React Native中隐藏组件

Question

嗨，我有这样的TextInput

现在，当我在TextInput中输入文本时，当我单击Cancel时，它将清除TextInput中的文本，现在与此同时，我想在单击时隐藏Cancel。

这是我的代码

import React, { Component } from 'react';
import {
    Dimensions,
    View,
    Animated,
    TextInput,
    TouchableOpacity,
    StyleSheet,

} from 'react-native';
import colors from '../styles/colors';

const { width } = Dimensions.get('window');
const PADDING = 16;
const SEARCH_FULL_WIDTH = width - PADDING * 2; //search_width when unfocused
const SEARCH_SHRINK_WIDTH = width - PADDING - 90; //search_width when focused

const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity);

export default class Test extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputLength: new Animated.Value(SEARCH_FULL_WIDTH),
            cancelPosition: new Animated.Value(0),
            opacity: new Animated.Value(0),
            searchBarFocused: false,
            text: '',
            showCancel: true
        };
    }


    onFocus = () => {
        Animated.parallel([
            Animated.timing(this.state.inputLength, {
                toValue: SEARCH_SHRINK_WIDTH,
                duration: 250
            }),
            Animated.timing(this.state.cancelPosition, {
                toValue: 16,
                duration: 400
            }),
            Animated.timing(this.state.opacity, {
                toValue: 1,
                duration: 250
            }),
        ]).start();
    };

    onBlur = () => {
        Animated.parallel([
            Animated.timing(this.state.inputLength, {
                toValue: SEARCH_FULL_WIDTH,
                duration: 250
            }),
            Animated.timing(this.state.cancelPosition, {
                toValue: 0,
                duration: 250
            }),
            Animated.timing(this.state.opacity, {
                toValue: 0,
                duration: 250
            })
        ]).start();
    };

    clearInput = () => {
        this.textInputRef.clear();
        //this.onFocus.bind(this);
        this.setState({
            showCancel: !this.state.showCancel
        });
      }
      _renderCancel() {
        if (this.state.showCancel) {
            return (
                <AnimatedTouchable
                style={[styles.cancelSearch, { right: this.state.cancelPosition }]}
                onPress={(this.clearInput.bind(this))}
            >
                <Animated.Text
                    style={[styles.cancelSearchText, { opacity: this.state.opacity, color: colors.darkBlue }]}
                    onChangeText={text => this.setState({ text })}
                    value={this.state.text}
                >
                    Cancel
      </Animated.Text>
            </AnimatedTouchable>

            );
        } else {
            return null;
        }
    }


    render() {
        const { searchBarFocused } = this.state;

        return (
            <View style={styles.searchContainer}>
                <Animated.View
                    style={[
                        styles.search,
                        {
                            width: this.state.inputLength,
                            position: 'absolute',
                            left: 16,
                            alignSelf: 'center'
                        },
                        searchBarFocused === true ? undefined : { justifyContent: 'center' }
                    ]}
                >
                    <TextInput
                        style={styles.searchInput}
                        onBlur={this.onBlur}
                        onFocus={this.onFocus}
                        placeholder="Enter condition, primary care, speciality"
                        ref={(ref) => { this.textInputRef = ref; }}
                    />


                </Animated.View>


                <AnimatedTouchable
                    style={[styles.cancelSearch, { right: this.state.cancelPosition }]}
                    onPress={this.clearInput.bind(this)}
                >
                    <Animated.Text
                        style={[styles.cancelSearchText, { opacity: this.state.opacity, color: colors.darkBlue }]}
                        onChangeText={text => this.setState({ text })}
                        value={this.state.text}
                    >
                        Cancel
          </Animated.Text>
                </AnimatedTouchable>
             {this._renderCancel() }
            </View>
        );
    }
}

const styles = StyleSheet.create({
    searchContainer: {
        flexDirection: 'row',
        height: 72,
        borderColor: colors.light_green,
        paddingTop: 100
    },
    search: {
        height: 40,
        width: '100%',
        marginTop: 5,
        borderRadius: 6,
        alignItems: 'flex-start',
        justifyContent: 'flex-start',
        borderColor: colors.light_green,
        fontSize: 20,
        borderWidth: 1,
    },
    cancelSearch: {
        position: 'absolute',
        marginHorizontal: 16,
        textAlign: 'center',
        justifyContent: 'center',
        alignSelf: 'center',
        color: colors.darkBlue
    }
});

任何人都可以帮助我，如何在单击时隐藏“取消”。

单击取消时，我希望我的原始TextInput像这样

Answer 1

将样式设置为以下：

style={{ opacity: this.state.isVisible ? 1 : 0 }}

并相应地设置状态isVisibile以使其可见/隐藏。

Answer 2

如果您要实施明文，则可以使用 botFileSecret。 clearButtonMode

否则，如果您使用的是状态botFileSecret，则可以用作

clearButtonMode