问题
I'm currently learning react-native and getting stuck in ListView problems. I want to search data in ListView from a TextInput and i expect that the result is in ListView too.
Here's what i've done so far:
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>
);
},
what am i supposed to do next? Please help. Thanks :)
Update! After read the answer from urbancvek, i add function in setSearchText()
method like this:
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),
});
},
But it always show me all the movies, not filtered one. any ideas? thanks
回答1:
In your fetchData method you should probably save responseData to state too. You will then interact with this data each time search field changes.
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();
},
Now in your setSearchText()
method you should include some filter function that will find the movies you want from the movies you saved to state in 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);
});
},
Each time you want to update ListView you have to update it's dataSource. Only this way ListView component can realize that the data it's displaying has changed.
Hope I helped.
回答2:
Searching data in the listview is basically just searching for it in a linked list or an array just take the input and search for it in the datasource or data blob. You can use linear search or binary search whichever you prefer.
回答3:
The UIExplorer
example from Facebook shows how to do this with ListView:
https://github.com/facebook/react-native/tree/master/Examples/UIExplorer
来源:https://stackoverflow.com/questions/37938189/search-data-in-listview-react-native