React Native - double ListViews関数呼び出し時に同時にレンダリングする

Question

ListViewを使用してTextInputを自動作成しました。リストと入力フィールドをビューに入れ、flexDirectionプロパティをrowに設定しました。 1つのフィールドに入力すると、他のフィールドのリストもレンダリングされます。私は同じ機能を使って別のフィールドでした。しかしそれはレンダリングされません。 flexDirectionを行に変更してもこの問題は発生しません。どのように入力フィールドに固有のレンダリングリストを作成するのですか？ここにビューと機能に関連する私のコードです。

-----------------ビューのコード--------------削除するには

<View style={styles.float}> 
      <View style={[styles.flex]}> 
       <Text style={styles.modalLabels}>Tags</Text> 
       <TextInput 
       style={styles.input} 
       defaultValue={this.state.fillTags} 
       onChangeText={(id) => this.search(id, 'tags')} 
       underlineColorAndroid='#bcbcbc' 
       /> 
       <ListView 
       style={[styles.listview]} 
       dataSource={ds.cloneWithRows(this.state.searchedTags)} 
       renderRow={(key) => this.renderList(key, 'tags')} 
       /> 
      </View> 
      <View style={[styles.flex]}> 
       <Text style={styles.modalLabels}>Location</Text> 
       <TextInput 
       style={styles.input} 
       defaultValue={this.state.fillLocation} 
       onChangeText={(id) => this.search(id, 'location')} 
       underlineColorAndroid='#bcbcbc' 
       /> 
       <ListView 
       style={[styles.listview]} 
       dataSource={ds.cloneWithRows(this.state.searchedLocation)} 
       renderRow={(key) => this.renderList(key, 'location')} 
       /> 
      </View> 
</View> 

-----------機能---------------------

autofill = (item,key) => { 
    if(key === 'rider'){ 
     this.setState({fillRider: item.name, searchedRiders: []}) 
    } 
    else if(key === 'tags'){ 
     this.setState({fillTags: item.name, searchedTags: []}) 
    } 
    else if(key === 'location'){ 
     this.setState({fillLocation: item.name, searchedLocation: []}) 
    } 
    } 

    renderList = (item, key) => { 
    const renderItem = (
     <TouchableOpacity> 
      <Text 
      style={styles.searchText} 
      onPress={() => this.autofill(item,key)}> 
      {item.name} 
      </Text> 
     </TouchableOpacity> 
    ) 
    if(key === 'rider'){ 
     return renderItem 
    } 

    else if(key === 'tags'){ 
     return renderItem 
    } 
    else if(key === 'location'){ 
     return renderItem 
    } 
    } 

    search = (searchedText, id) => { 

    if(id === 'riders'){ 
     var searchResult = riders.filter(function(rider){ 
     return rider.name.toLowerCase().indexOf(searchedText.toLowerCase()) > -1; 
     }); 
     this.setState({searchedRiders: searchResult, searchedTags: [], searchedLocation: []}) 
    } 
    else if(id === 'tags'){ 
     var searchResult = tags.filter(function(tags){ 
     return tags.name.toLowerCase().indexOf(searchedText.toLowerCase()) > -1; 
     }); 
     this.setState({searchedTags: searchResult, searchedLocation: [], searchedRiders: []}) 
    } 
    else if(id === 'location'){ 
     var searchResult = location.filter(function(location){ 
     return location.name.toLowerCase().indexOf(searchedText.toLowerCase()) > -1; 
     }); 
     this.setState({searchedLocation: searchResult, searchedRiders: [], searchedTags: []}) 
    } 
    } 

Answer 1

'空のセクションのヘッダー'という警告が表示されたら、リストビューに次の小道具を追加してください：

enableEmptySections = {true}

だからあなたのListViewは、次のようになります。あなたのコードのこの部分で

<ListView 
       style={[styles.listview]} 
       enableEmptySections={true} 
       dataSource={ds.cloneWithRows(this.state.searchedLocation)} 
       renderRow={(key) => this.renderList(key, 'location')} 
       /> 

Answer 2

：

autofill = (item,key) => { 
    if(key === 'rider'){ 
     this.setState({fillRider: item.name, searchedRiders: []}) 
    } 
    else if(key === 'tags'){ 
     this.setState({fillTags: item.name, searchedTags: []}) 
    } 
    else if(key === 'location'){ 
     this.setState({fillLocation: item.name, searchedLocation: []}) 
    } 
    } 

次の2つのリストビューのためのデータソース（searchedTags、searchedLocation）を更新しています。問題は次のとおりです。 else if if。

dataSourceが同時に更新されない限り、Viewに反映されません。

JSXコードのサポートを提供できるように、ダブルリストビューのUIを提供します。