加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

反应本机中的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();
}

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读