React本机Listview重新呈现行

时间:2016-10-08 15:13:56

标签: react-native react-native-listview

因为一些性能问题,我希望只刷新换行, 但是,虽然 rowHasChanged 返回 true ,但该行不会更新或执行 renderRow 。热重新加载后,只更新一次成功,我很困惑。

index.ios.js

  import {AppRegistry} from 'react-native';
  import React from 'react';
  import ImmutableDataSource from 'react-native-immutable-listview-datasource';
  import {View,Text,ListView,StyleSheet} from 'react-native';
  import Immutable from 'immutable';

  const ds = new ImmutableDataSource();
  console.log(ds);
  let styles = StyleSheet.create({
    selected:{
      color:"#FD973C"
    },
    unselected:{

    }
  })

  class List extends React.Component {
    constructor(props){
      console.log('constructor');
      super(props);
      this.state = {
        data : Immutable.fromJS([
          {title:'row111111'},
          {title:'row222222'},
          {title:'row333333'},
          {title:'row444444'},
          {title:'row555555'},
        ])
      }
    }
    handlePress = (rowData,rowID)=>{
      console.log('handlePress',rowID);
      this.setState({
        data:this.state.data.setIn([rowID,'selected'],!this.state.data.getIn([rowID,'selected']))
      })
    }
    renderRow = (rowData,sectionID,rowID) => {
      console.log('render row',rowData.get('title'),rowID);

      let style;
      if(rowData.get('selected')){
        style = styles.selected;
      }else{
        style = styles.unselected;
      }
      return <Text
          style={style}
          onPress={this.handlePress.bind(this,rowData,rowID)}
        >{rowData.get('title')}</Text>;
    }

    render() {
      return (
        <View>
        <ListView
          enableEmptySections={true}
          initialListSize={10}
          pageSize={20}
          onEndReachedThreshold={0}
          ref={this.props.scrollRef}
          dataSource={ds.cloneWithRows(this.state.data)}
          renderRow={this.renderRow}
        />
        </View>
      );
    }

  }

  AppRegistry.registerComponent('NovelReader', ()=>{
    return List;
  });

在热负载之前,单击项目,不更新单击的行,

热插拔后,点击项目,重新点击点击的线

0 个答案:

没有答案