Hide/Show in reagieren -native auf Presse

Question

i Werkzeugleiste haben in reagieren-native, wie diese

wenn Klick auf der Suche Symbol, muss ich Eingabetext offen wie dieser

Ich habe viele Beispiele dafür versucht, aber ich kann niemanden für meinen Fall anwenden, irgendeine Hilfe ???

dies ist mein Code:

constructor(props, context) { 
    super(props, context); 
    const ds = new ListView.DataSource({ 
    rowHasChanged: (r1, r2) => r1 !== r2 
    }); 
    this.state = { 
    visible: false, 
     selectedTab: 'view1', 

    ds:[{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"}], 
    dataSource:ds, 
    } 


} 
     <TouchableHighlight 
onPress={()=>this.toggleStatus()}> 
    <Image style={styles.imagestyle} 
    source={require('./ic_search.png')} /> 
    </TouchableHighlight> 
    <Text style={styles.toolbarTitle}>CUSTOMERS</Text> 
    <TouchableHighlight onPress={() => this.moveToAddNewCustomer()}> 
    <Image style={styles.imagestyle} 
        visible={this.state.visible} 

    source={require('./ic_action_name.png')} /> 
    </TouchableHighlight> 


    </View> 

, wie ich den Titel und die offenen Eingabetext verbergen kann ???

Answer 1

Wenn die Navigationsleiste Zugang zum visible Zustand hat, dann sollten Sie in der Lage sein, nur eine if Aussage zu verwenden, um festzustellen, welche

zeigen

if (this.state.visible) { 
    return (
    <SearchBar /> 
) 
} else { 
    return (
    <Title /> 
) 
}