Verwenden von if-Anweisung zum Rendern von Komponenten funktioniert nicht

Question

Wenn der Bildschirm geladen wird, sind die Überarbeitungsschaltfläche und die Listenansicht sichtbar.

Wenn ich die Suche drücke, verschwindet die Listenansicht und die Sucheingabe wird über die Schaltfläche gerendert.

Wenn ich weiter auf Suche drücke, wird die Sucheingabe umgeschaltet, aber die Schaltfläche bleibt und die Listenansicht wird nie wieder angezeigt.

Wenn ich {this.renderSubHeader(showSearchInput)} unter dem Listenansicht bewegen, dann die gleichen Dinge passiert, außer der Header verschwindet und der Listview bleibt.

import React, {Component} from 'react'; 
import { 
    View, 
    ListView, 
    Text, 
    StyleSheet 
} from 'react-native'; 
import {is} from 'immutable'; 
import Colours from '../constants/Colours'; 
import GlossaryButton from '../components/GlossaryButton'; 
import SearchInput from '../components/SearchInput'; 
import Header from '../components/Header'; 
import Button from '../components/Button'; 
import CategoryService from '../storage/services/Category'; 
import UserTermService from '../storage/services/UserTerm'; 
import TermDetails from './TermDetails'; 
import LoadScreen from '../components/Loading'; 

type Props = { 
    items: Object[], 
    tabNavigation: Object 
} 

export default class UserTermList extends Component { 
    props: Props; 

    constructor (props) { 
    super(props); 

    const ds = new ListView.DataSource({ 
     sectionHeaderHasChanged: (s1, s2) => !is(s1, s2), 
     rowHasChanged: (r1, r2) => !is(r1, r2) 
    }); 

    this.state = { 
     dataSource: ds, 
     listData: null, 
     userTerms: [], 
     searchText: '', 
     showSearchInput: false, 
     loaded: false 
    }; 
    } 

    componentDidMount() { 
    this.loadContent(); 
    } 

    loadContent = async() => { 
    const categories = await CategoryService.findAll(); 
    const userTerms = await UserTermService.findAll(); 

    const listData = await this.createListData(categories, userTerms); 
    const dataSource = this.state.dataSource.cloneWithRowsAndSections(listData); 

    this.setState({dataSource, listData, userTerms, loaded: true}); 
    }; 

    createListData = async (categories: Array, userTerms: Array): Object => { 
    const listData = {}; 
    await Promise.all(categories.map(async (category) => { 
     listData[category.title] = await this.getUserTermsFromCategory(category.baseTerm, userTerms); 
    })); 
    return listData; 
    }; 

    getUserTermsFromCategory = async (categoryTerms: Array, userTerms: Array): Array => (
    categoryTerms.filter((term) => this.isTermInCategory(term.id, userTerms)) 
); 

    isTermInCategory = (termID: number, userTerms: Array): Boolean => { 
    return userTerms.filter((term) => term.id === termID).length > 0; 
    // return terms.length > 0; 
    }; 

    navigateToTerm = (baseTermID: number) => { 
    this.props.tabNavigation.push(TermDetails, {baseTermID}); 
    }; 

    filterSection = (section: string, text: string) => (
    this.state.listData[section].filter((section) => (
     section.term.toLowerCase().includes(text.toLowerCase()) 
    )) 
); 

    filterList = (text: string) => { 
    const listData = {}; 
    Object.keys(this.state.listData).map((section) => { 
     const sectionArray = this.filterSection(section, text); 
     sectionArray.length > 0 && (listData[section] = sectionArray); 
    }); 
    return listData; 
    }; 

    onSearchChanged = (text: string) => { 
    const dataSource = this.state.dataSource.cloneWithRowsAndSections(this.filterList(text)); 
    this.setState({dataSource}); 
    }; 

    searchPressed =() => { 
    this.state.showSearchInput ? this.setState({showSearchInput: false}) : this.setState({showSearchInput: true}); 
    }; 

    reviseWords =() => { 
    }; 

    onItemSelected = (rowID: number, sectionID: string) => { 
    const baseTermID = this.state.listData[sectionID][rowID].id; 
    this.navigateToTerm(baseTermID); 
    }; 

    renderRow = (rowData: Object, sectionID: string, rowID: number): GlossaryButton => (
    <GlossaryButton 
     onButtonPress={this.onItemSelected} 
     buttonText={rowData.term} 
     sectionID={sectionID} 
     rowID={rowID}/> 
); 

    renderSectionHeader = (section: Object, sectionID: string): Text => (
    <Text style={styles.sectionText}> 
     {sectionID} 
    </Text> 
); 

    renderSubHeader = (showSearchInput: boolean) => { 
    if (showSearchInput) { 
     return <SearchInput onChangeText={this.onSearchChanged}/>; 
    } 
    return (
     <Button 
     style={styles.reviseButton} 
     onButtonPress={this.reviseWords} 
     buttonText={'Revise Words'} 
     buttonColour={Colours.green}/> 
    ); 
    }; 

    render() { 
    const {loaded, showSearchInput} = this.state; 
    //const renderSubHeader = this.renderSubHeader(showSearchInput); 

    return (
     loaded ? 
     <View style={styles.container}> 
      <Header 
      title={'My Terms'} 
      actionText={'Search'} 
      onActionPress={this.searchPressed}/> 

      {this.renderSubHeader(showSearchInput)} 

      <ListView 
      style={styles.list} 
      dataSource={this.state.dataSource} 
      renderRow={this.renderRow} 
      renderSectionHeader={this.renderSectionHeader} 
      keyboardShouldPersistTaps={'always'} 
      renderEmptySections/> 
     </View> 
     : <LoadScreen/> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    paddingTop: 80, 
    paddingBottom: 80, 
    backgroundColor: Colours.grayVeryLight 
    }, 

    reviseButton: { 
    marginLeft: 10, 
    marginRight: 10, 
    marginTop: 20, 
    marginBottom: 12 
    }, 

    sectionText: { 
    marginTop: 10, 
    marginBottom: 10, 
    fontSize: 18, 
    fontFamily: 'Bariol-Bold', 
    color: Colours.darkTextHalf 
    }, 

    list: { 
    flex: 1, 
    padding: 4, 
    paddingBottom: 16, 
    marginLeft: 16, 
    marginRight: 16 
    } 
}); 

reagieren-native 0,40
macOS Sierra 10.12.3
Samsung S4 (API 21)

Answer 1

Sehr seltsam. Ich habe die meisten Stile auskommentiert und es hat funktioniert. Also habe ich angefangen, Styles auszukommentieren, bis sie alle wieder unkommentiert sind und es immer noch funktioniert.