React Native - 双重ListViews在函数调用时同时呈现

Question

我使用ListView在TextInput上创建了自动提示。我已经将列表和输入字段放在一个视图中，并将flexDirection属性设置为行。当我输入一个字段时，其他字段的列表也被渲染。我是一个独立的领域使用相同的功能。但它不会被渲染。并将flexDirection更改为行也不会导致此问题。我如何让它呈现特定于其输入字段的列表。这里是我的代码的意见和相关的功能..

----------------- code for view --------------

<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

要取出'empty section header'警告，在你的listview中添加以下道具：

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: []}) 
    } 
    } 

你两个列表视图更新数据源（searchedTags，searchedLocation）。问题是： 其他条件。

除非dataSource同时更新，否则它将不会反映在View中。

提供双ListView的UI，以便我可以为您提供JSX代码的帮助。