2

我目前正在学习 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),
    });
  },

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

4

3 回答 3

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 组件才能意识到它显示的数据发生了变化。

希望我有所帮助。

于 2016-06-21T14:56:40.103 回答
0

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

于 2016-06-21T09:42:22.557 回答
0

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

于 2016-06-21T14:36:21.683 回答