2

私は現在、反応ネイティブを学習しており、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 も状態に保存する必要があります。検索フィールドが変更されるたびに、このデータを操作します。

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 を更新するたびに、dataSource を更新する必要があります。この方法でのみ、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 に答える