OGeek|极客世界-中国程序员成长平台

标题: android - ListView 中的搜索数据 react 原生 [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-13 17:01
标题: android - ListView 中的搜索数据 react 原生

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

---

Best Answer-推荐答案

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

希望我能帮上忙。

关于android - ListView 中的搜索数据 react 原生，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37938189/

---

欢迎光临 OGeek|极客世界-中国程序员成长平台 (https://ogeek.cn/)

Powered by Discuz! X3.4