ifステートメントを使用してコンポーネントが動作しないようにする

Question

画面に変更ボタンが表示され、リストビューが表示されます。

検索を押すと、リストビューが消え、検索入力がボタンの上に表示されます。

検索を続けると、検索入力が切り替わりますが、ボタンはそのまま残り、リストビューは決して再表示されません。

{this.renderSubHeader(showSearchInput)}をlistviewの下に移動すると、ヘッダーが消えてリストビューが残る以外は同じことが起こります。

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

反応し、ネイティブの0.40
MacOSのシエラ10.12.3
サムスンS4（API 21）

Answer 1

非常に奇妙な。私はスタイルのほとんどをコメントアウトし、それは働いた。だから私はスタイルのコメントをすべて解除してからもう一度やり直すまでスタイルのコメントを外し始めました。