nuke-list-view/theme/ajax.jsx

列表

/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import RefreshControl from 'nuke-refresh-control';
import Touchable from 'nuke-touchable';
import Icon from 'nuke-icon';
import ListView from 'nuke-list-view';
import Image from 'nuke-image';

class ListViewDemo extends Component {
  constructor() {
    super();
    this.state = {
      data: [
        {
          id: 'xxxxxxx',
          themeName: '测试',
          themeDesc: '默认的一条数据',
        },
        {
          id: 'xxxxxxx',
          themeName: '测试',
          themeDesc: '默认的一条数据',
        },
        {
          id: 'xxxxxxx',
          themeName: '测试',
          themeDesc: '默认的一条数据',
        },
        {
          id: 'xxxxxxx',
          themeName: '测试',
          themeDesc: '默认的一条数据',
        },
      ],
      stop: false,
      isRefreshing: false,
      showLoading: true,
      refreshText: '↓ 下拉刷新',
    };
    this.index = 0;
  }
    handleRefresh = (e) => {
      this.setState({
        isRefreshing: true,
        refreshText: '加载中',
      });
      setTimeout(() => {
        this.setState({
          isRefreshing: false,
          data: [{
            id: 'xxxxxxx',
            themeName: '测试',
            themeDesc: '默认的一条数据',
          }],
          refreshText: '↓ 下拉刷新',
        });
      }, 1000);
    };

    handleLoadMore() {
      const self = this;
      // 这里进行异步操作
      if (self.index == 5) {
        self.setState({ showLoading: false });
        return;
      }
      setTimeout(() => {
        self.state.data.push({ themeName: 'test', themeDesc: 'loadmore1' });
        self.setState(self.state);
        self.index++;
      }, 1000);
    }
    renderHeader=() => <RefreshControl style={styles.refresh} refreshing={this.state.isRefreshing} onRefresh={this.handleRefresh}><Text style={styles.loadingText}>{this.state.refreshText}</Text></RefreshControl>
    renderFooter=() => (this.state.showLoading ?
      <View style={[styles.loading]}><Text style={styles.loadingText}>加载中...</Text></View>
      : null)
    componentWillMount() {
      // QN.fetch('http://dip.alibaba-inc.com/api/v2/services/schema/mock/47643', {
      //     method: 'GET',
      //     body: 'id=233&t=20161013',
      //     //mode: 'cors',
      //     dataType: 'jsonp',
      // })
      // .then(response => {
      //     return response.json();
      // })
      // .then(data => {
      //     this.setState({data:data.data.result})
      // })
      // .catch(error => {
      //     console.log(error);
      // });
    }

    renderItem(item, index) {
      return (<View style={[styles.slideItem]} key={`item${index}`}>
        <Text>{item.themeName}</Text>
        <Text>{item.themeDesc}</Text>
        {
          item.themePicUrl ?
            <Image source={{ uri: item.themePicUrl }} style={{ quality: 'original', width: '750rem', height: '400rem' }} />
            : null
        }
      </View>);
    }

    render() {
      const self = this;
      return (
        <ListView
          renderRow={this.renderItem.bind(this)}
          dataSource={this.state.data}
          onEndReached={this.handleLoadMore.bind(this)}
          renderHeader={this.renderHeader}
          renderFooter={this.renderFooter}
          showScrollbar={false}
          style={styles.listContainer}
        />

      );
    }
}

const styles = {
  listContainer: {
    flex: 1,
  },
  slideItem: {
    width: '750rem',
    height: '600rem',
    borderBottomWidth: '4rem',
    borderBottomStyle: 'solid',
    borderBottomColor: '#ccccc',
    justifyContent: 'center',
    alignItems: 'center',
  },
  ItemText: {
    color: '#ffffff',
    fontSize: '40rem',
  },
  img: {
    width: '750rem',
    height: '1154rem',
  },

  refresh: {
    height: '80rem',
    width: '750rem',
    // display:"flex",
    // flex:"1",
    // flexDirection:"row",
    backgroundColor: '#cccccc',
    justifyContent: 'center',
    alignItems: 'center',
  },
  loading: {
    height: '80rem',
    display: 'flex',
    width: '750rem',
    flexDirection: 'row',
    backgroundColor: '#cccccc',
    alignItems: 'center',
    justifyContent: 'center',
  },
  loadingText: {
    color: '#666666',
  },
};
render(<ListViewDemo />);