反应本机中的ListView数据
发布时间:2020-12-15 05:07:25 所属栏目:百科 来源:网络整理
导读:我正在尝试为本地列表视图编写一个过滤器.但它不起作用,我不知道为什么. 这是我的班级 – import { AppRegistry,Image,ListView,StyleSheet,Text,TextInput,Navigator,TouchableHighlight,TouchableOpacity,filter,View} from 'react-native';var REQUEST_UR
我正在尝试为本地列表视图编写一个过滤器.但它不起作用,我不知道为什么.
这是我的班级 – import { AppRegistry,Image,ListView,StyleSheet,Text,TextInput,Navigator,TouchableHighlight,TouchableOpacity,filter,View } from 'react-native'; var REQUEST_URL = GLOBAL.STATES_URL + '?apikey=' + GLOBAL.API_KEY; class MainPage extends Component { constructor(props) { super(props); this.state = { dataSource: new ListView.DataSource({ rowHasChanged: (row1,row2) => row1 !== row2,}),loaded: false,searchText: '',state: '',}; } componentDidMount() { this.fetchData(); } componentDidUpdate() { if (this.state.searchText === '') { this.fetchData(); } } filterStates(searchText,states) { var text = searchText.toLowerCase(); var rows = []; for (var i=0; i < states.length; i++) { var stateName = states[i].name.toLowerCase(); if(stateName.search(text) !== -1){ rows.push({ name : states[i].name,}); } } this.setState({ dataSource: this.state.dataSource.cloneWithRows(rows),loaded : true,}); } fetchData() { fetch(REQUEST_URL) .then((response) => response.json()) .then((responseData) => { this.setState({ dataSource: this.state.dataSource.cloneWithRows(responseData),loaded: true,}); }) .done(); } setSearchText(event){ var searchText = event.nativeEvent.text; this.setState({searchText}); fetch(REQUEST_URL) .then((data) => { this.filterStates(searchText,data); }) .done(); } render() { return ( <Navigator renderScene={this.renderScene.bind(this)} navigator={this.props.navigator} navigationBar={ <Navigator.NavigationBar style={{backgroundColor: '#246dd5'}} routeMapper={NavigationBarRouteMapper} /> } /> ); } renderScene(route,navigator) { if (!this.state.loaded) { return this.renderLoadingView(); } return ( <View style={styles.combo}> <TextInput style={styles.searchBar} value={this.state.searchText} onChange={this.setSearchText.bind(this)} placeholder='Search' /> <ListView dataSource={this.state.dataSource} renderRow={this.renderState.bind(this)} // renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />} renderSeparator={(sectionID,rowID) => <View key={`${sectionID}-${rowID}`} style={styles.separator} />} style={styles.listView} /> </View> ); } renderLoadingView() { return ( <View style={styles.container}> <Text> Loading States... </Text> </View> ); } renderState(state,route,navigator) { return ( <TouchableHighlight onPress={this.gotoPersonPage.bind(this,state)}> <View style={styles.row}> <View style={styles.container}> <Text style={styles.name}>{state.name}</Text> </View> </View> </TouchableHighlight> ); } gotoPersonPage(state) { this.props.navigator.push({ id: 'PersonPage',name: 'PersonPage',data: {name:state.name,abbreviation:state.abbreviation},}); } } 任何人都可以告诉上面代码中的问题是什么,以及该问题的解决方案.
尝试在组件外部设置新的ListView.DataSource({rowHasChanged:(row1,row2)=> row1!== row2):
var ds = new ListView.DataSource({ rowHasChanged: (row1,row2) => row1 !== row2 class MainPage extends Component { this.state = { dataSource: new ListView.DataSource({ rowHasChanged: (row1,}; } 然后像这样设置状态: filterStates(searchText,states) { ... this.setState({ dataSource: ds.cloneWithRows(rows),}); } 还有这个: fetchData() { fetch(REQUEST_URL) .then((response) => response.json()) .then((responseData) => { this.setState({ dataSource: ds.cloneWithRows(responseData),}); }) .done(); } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |