Android React Native-函数调用时同时呈现双列表视图

我使用ListView对TextInput进行了自动提示。我已将列表和输入字段放在视图中，并将flexDirection属性设置为row。当我在一个字段中输入时，另一个字段的列表也会呈现。我是一个单独的字段，使用相同的函数。但它不会被渲染。将flexDirection更改为row也不会出现此问题。如何使其呈现特定于其输入字段的列表。这是我的视图代码和相关函数

-----------------查看代码--------------

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

标签
this.search（id，'tags'）}
underlineColorAndroid='#bcbc'
/>
this.renderList（键'tags'）}
/>
位置
this.search（id，'location'）}
underlineColorAndroid='#bcbc'
/>
this.renderList（键'location'）}
/>

-----------功能---------------------

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

autofill=（项目、键）=>{
如果（键==‘骑手’）{
this.setState（{fillRider:item.name，searchedRiders:[]}）
}
else if（键==='tags'）{
this.setState（{fillTags:item.name，searchedTags:[]））
}
else if（键===‘位置’）{
this.setState（{fillLocation:item.name，searchedLocation:[]}）
}
}
renderList=（项，键）=>{
常数renderItem=(
此.autofill（项目、键）}>
{item.name}
)
如果（键==‘骑手’）{
返回渲染
}
else if（键==='tags'）{
返回渲染
}
else if（键===‘位置’）{
返回渲染
}
}
搜索=（searchedText，id）=>{
如果（id==‘骑手’）{
var searchResult=riders.filter（函数（rider））{
返回rider.name.toLowerCase（）.indexOf（searchedText.toLowerCase（））>-1；
});
this.setState（{searchedDriders:searchResult，searchedTags:[]，searchedLocation:[]））
}
else if（id=='tags'）{
var searchResult=tags.filter（函数（标签）{
返回tags.name.toLowerCase（）.indexOf（searchedText.toLowerCase（））>-1；
});
this.setState（{searchedTags:searchResult，searchedLocation:[]，searchedDriders:[]））
}
else if（id==‘位置’）{
var searchResult=location.filter（函数（位置）{
返回location.name.toLowerCase（）.indexOf（searchedText.toLowerCase（））>-1；
});
this.setState（{searchedLocation:searchResult，searchedDriders:[]，searchedTags:[]））
}
}

要删除“空节标题”警告，请在listview中添加以下道具：

enableEmptySections={true}

因此，您的ListView将如下所示：

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

this.renderList（键'location'）}
/>

在代码的这一部分：

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

您正在为两个ListView更新数据源（searchedTags、searchedLocation）。问题在于： 否则，如果条件允许

除非数据源同时更新，否则它不会反映在视图中

---

提供双列表视图的UI，以便我可以为您提供JSX代码方面的帮助。

另外，如果有人告诉我如何在使用列表视图时删除“空节标题”警告，那就太好了。仍在寻找答案…..谢谢。我刚刚看到文档和警告中提到了这一点。我的错。不过，thanksI也应该给你提供链接。请对答案进行投票。我想我已经在我的问题中为用户界面提供了查看代码。另外，请注意，当我从容器视图中删除flexDirection并将它们沿列对齐时，它们将被单独渲染，工作正常