Question

我使用ListView在TextInput上做了一个autosuggest。我已将列表和输入字段放在视图中，并将flexDirection属性设置为row。当我在一个字段中输入时，另一个字段的列表也会被渲染。我是一个使用相同功能的单独字段。但它没有得到渲染。并将flexDirection更改为row也不会产生此问题。如何使其呈现特定于其输入字段的列表。这是我的视图代码和相关的函数..

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

<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>

----------- functions ---------------------

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

您正在为两个ListView更新dataSources（searchingTags，searchingLocation）。问题在于：否则如果条件。

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

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

React Native - 双重ListViews在函数调用时同时渲染

2 个答案: