ListView 中的搜索数据反应原生

Posted 2023-03-15

【中文标题】ListView 中的搜索数据反应原生

【英文标题】：Search data in ListView react native

【发布时间】：2016-06-21 07:33:29

【问题描述】：

我目前正在学习 react-native 并陷入 ListView 问题。我想从 TextInput 在 ListView 中搜索数据，我希望结果也在 ListView 中。

这是我到目前为止所做的：

var PageOne = React.createClass(
  getInitialState:function()
    return
      dataSource: new ListView.DataSource(
        rowHasChanged: (row1, row2) => row1 !== row2,
      ),
      loaded: false,
      colorProps: 
        titleColor: 'white',
      ,
      searchText:"",
    
  ,

  componentDidMount() 
    this.fetchData();
  ,

  fetchData() 
    fetch(REQUEST_URL)
      .then((response) => response.json())
      .then((responseData) => 
        this.setState(
          dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
          loaded: true,
        );
      )
      .done();
  ,

  setSearchText(action)
    let searchText = event.nativeEvent.text;
    this.setState(searchText);

    /*
     *
     * 
     */

  ,

  render() 
    return (
      <View style= flex: 1 >
        <Toolbarandroid
          title="Movies"
          ...this.state.colorProps
          style=height:40, backgroundColor:'blue'
           />
        <TextInput
          placeholder="Search movies......."
          value=this.state.searchText
          onChange=this.setSearchText.bind(this) />
        <ListView
        dataSource=this.state.dataSource
        renderRow=this.renderMovie
        style=styles.listView
        />
      </View>
    );
  ,

  renderMovie(movie) 
    return (
    <TouchableOpacity onPress=this._handlePressList.bind(this, movie)>
      <View style=styles.container>
        <Image
          source=uri: movie.posters.thumbnail
          style=styles.thumbnail
        />
        <View style=styles.rightContainer>
          <Text style=styles.title>movie.title</Text>
          <Text style=styles.year>movie.year</Text>
        </View>
      </View>
    </TouchableOpacity>
    );
  ,

接下来我应该做什么？请帮忙。谢谢:)

更新！在阅读了urbancvek 的答案后，我在setSearchText() 方法中添加了这样的函数：

setSearchText(event)
    const searchText = event.nativeEvent.text;
    
    moviesLength = this.state.movies.length;
    aMovie = this.state.movies;

    const filteredMovies = this.state.movies.filter(checkTitle);
    console.log("movies: " + JSON.stringify(filteredMovies));

    function checkTitle() 
        for(i=0;i<moviesLength;i++)
          if(aMovie[i].title === searchText)
            console.log("found:  " + aMovie[i].title);
            return aMovie[i];
          
        
    
    
    this.setState(
        searchText,
        dataSource: this.state.dataSource.cloneWithRows(filteredMovies),
    );
  ,

但它总是向我显示所有电影，而不是过滤的电影。有任何想法吗？谢谢

【问题讨论】：

您的checkTitle() 过滤器函数在匹配时返回所有部电影。您不需要遍历aMovie 数组，只需将checkTitle(movie) 修改为return movie.title.startsWith(searchText);

【参考方案1】：

在您的 fetchData 方法中，您可能也应该将 responseData 保存到 state。然后，您将在每次搜索字段更改时与此数据进行交互。

fetchData() 
    fetch(REQUEST_URL)
      .then((response) => response.json())
      .then((responseData) => 
        this.setState(
          dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
          movies: responseData.movies,
          loaded: true,
        );
      ).done();
 ,

现在在您的setSearchText() 方法中，您应该包含一些过滤功能，该功能将从您保存到fetchData() 中的状态的电影中找到您想要的电影。

setSearchText(action)
    const searchText = event.nativeEvent.text;
    const filteredMovies = this.state.movies.filter(/* awesome filter function */);

    this.setState(
        searchText,
        dataSource: this.state.dataSource.cloneWithRows(filteredMovies);
    );
,

每次您想要更新 ListView 时，您都必须更新它的数据源。只有这样 ListView 组件才能意识到它显示的数据发生了变化。

希望我能帮上忙。

【讨论】：

解决了！我在setSearchText() 方法中添加了一个带有 obj.indexOf(searchText) 的函数，它可以工作。非常感谢@urbancvek :)

【参考方案2】：

在列表视图中搜索数据基本上只是在链表或数组中搜索它，只需获取输入并在数据源或数据块中搜索它。您可以根据自己的喜好使用线性搜索或二分搜索。

【参考方案3】：

来自 Facebook 的 UIExplorer 示例展示了如何使用 ListView 执行此操作： https://github.com/facebook/react-native/tree/master/Examples/UIExplorer