优化

2026-08-05 06:24:39 +00:00 · 2016-02-23 17:50:26 +08:00
parent a0d18cd59e
commit e0d192ae8d
10 changed files with 4 additions and 1016 deletions
@@ -1,212 +0,0 @@
 //3个主界面的listview
 'use strict';
 import React, {
  AppRegistry,
  Component,
  StyleSheet,
  ListView,
  Text,
  View,
  Image,
  TouchableOpacity,
  AlertIOS,
  RefreshControl,
  ActivityIndicatorIOS
 } from 'react-native';
 import InfoPage from './Info.js'
 export default class MyListView extends Component{
 	//初始化。
    constructor(props) {
    	super(props);
   	 	this.state = {
      		isLoading: true, //是否正在加载.
      		isLoadingFail: true, //是否加载失败.
      		isHaveData: false,    //是否有加载出数据了。
      		dataSource: new ListView.DataSource({
        		rowHasChanged: (row1, row2) => row1 !== row2,
      		}),
      		queryNumber: 0,
    	};
    	// this.setState({dataSource:this.props.dataSource});
  	}
  componentDidMount(){
  	// this.props.navComponent.setNavItems({
   //    title: {
   //      component: (
   //        <Text style={styles.title}>
   //        {this.props.title}
   //        </Text>
   //      ),
   //      event: function() {
   //        this.fetchData();
   //      }.bind(this)
   //    }
   //  }),
    this.myfetchData();
  }
  onRefresh(){
    this.myfetchData();
  }
 //数据查询.
  myfetchData(){
    this.setState({isLoading:true,isLoadingFail:false});
    this.props.fetchData().then((responseData)=>{
    	this.setState({
            isLoading: false,
            isLoadingFail: false,
            isHaveData: true,
            // dataSource:this.state.dataSource.cloneWithRows(responseData),
        });
    },(error)=>{
    	AlertIOS.alert('没有数据');
        this.setState({
            isLoading: false,
            isLoadingFail:true,
            isHaveData:false,
        });
    });
  }
 render(){
  // return this.renderLoadingView();
    if (!this.state.isHaveData) {
      return this.renderLoadingView();
    }
    return (
      <ListView
        dataSource={this.props.dataSource}
        renderRow={this.renderMovie.bind(this)}
        renderSeparator={this.renderMovieRow}
        refreshControl={
          <RefreshControl
            refreshing={this.state.isLoading}
            onRefresh={this.myfetchData.bind(this)}
            tintColor="#61BFA9"
            title={this.props.refreshTitle}
            colors={['#ff0000', '#00ff00', '#0000ff']}
            progressBackgroundColor="#61BFA9"/>}
        style={styles.listView}/>
    );
  }
  pushInfo(index){
      this.props.navigator.push({
        title: 'New Page',
        component: <InfoPage movie={this.props.dataSource.getRowData(0,index)}> </InfoPage>
      });
  }
  renderLoadingView(){
     if (this.state.isLoadingFail) {
      return (
      <TouchableOpacity onPress={() =>this.myfetchData()} style={styles.container} >
      <View style={styles.container}>
        <Text>
          {'点击刷新'}
        </Text>
      </View>
      </TouchableOpacity>
    );
    }else{
      return(
        <View style={styles.container}>
          <Text>
            {'正在刷新'}
          </Text>
          <ActivityIndicatorIOS />
        </View>
      )
    }
  }
  renderMovieRow(sectionID, rowID, adjacentRowHighlighted){
        return (
      <View style={styles.topContainer} key={rowID}>
      </View>
    );
  }
 renderMovie(movie,sectionID, rowID, highlightRow){
    return (
      <View style={styles.container} key={rowID}>
      <TouchableOpacity onPress={()=>{this.pushInfo(rowID)}} style={styles.container} >
        <Image
          source={{uri: movie.imageurl}}
          style={styles.thumbnail}/>
        <View style={styles.rightContainer}>
          <Text style={styles.title}>{movie.title}</Text>
        </View>
        </TouchableOpacity>
      </View>
    );
  }
 }
 const styles = StyleSheet.create({
   container: {
    flex:2,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'White',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  title: {
    fontSize: 15,
    marginBottom: 8,
    marginTop: 10,
    marginLeft: 4,
    marginRight: 4,
    textAlign: 'left',
  },
  year: {
    textAlign: 'center',
  },
  rightContainer: {
    flex: 1,
  },
  topContainer:{
    flex:1,
    height : 30,
    backgroundColor: 'LightGray',
  },
   thumbnail: {
    width: 400,
    height: 200,
  },
    listView: {
    paddingTop: 0,
    marginBottom: 44,
    backgroundColor: 'LightGray',
  },
    navItem: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  // top{
  //   height:60,
  //   flex: 1,
  // },
 });
 module.exports = MyListView;
@@ -1,146 +0,0 @@
 //3个主界面的listview
 'use strict';
 import React, {
  AppRegistry,
  Component,
  StyleSheet,
  ListView,
  Text,
  View,
  Image,
  TouchableOpacity,
  AlertIOS,
  RefreshControl,
  ActivityIndicatorIOS
 } from 'react-native';
 import MyListView from './MyListView'
 var isPromise = require('is-promise')
 var REQUEST_URL = 'http://127.0.0.1:3000/users/list';
 export default class MyListViewDemo extends Component{
 	//初始化。
    constructor(props) {
    	super(props);
   	 	this.state = {
        dataSource: new ListView.DataSource({
          rowHasChanged: (row1, row2) => row1 !== row2,
        }),
      };
  	}
  componentDidMount(){
  	this.props.navComponent.setNavItems({
      title: {
        component: (
          <Text style={styles.title}>
          随机
          </Text>
        )
      }
    })
  }
  onRefresh(){
    this.myfetchData();
  }
 //数据查询.
  fetchData(){
    var page = Math.random() * 1000;
    page = Math.floor(page);
    var url = REQUEST_URL + '?page=' + page;
    return new Promise((resolve, reject)=>{
      fetch(url)
        .then((response) => response.json())
        .catch((error) => {
          reject(error);
        })
        .then((responseData) => {
          if(responseData){
              this.setState({
              dataSource: this.state.dataSource.cloneWithRows(responseData.datas),
            });
            resolve(responseData.datas);
          }else{
            reject('none');
          }
        })
        .done();
    })
  }
 render(){
    return (
      <MyListView
        dataSource={this.state.dataSource}
        refreshTitle={'测试一下刷新'}
        {...this.props}
        fetchData={this.fetchData.bind(this)}/>
    );
  }
 }
 const styles = StyleSheet.create({
   container: {
    flex:2,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'White',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  title: {
    fontSize: 15,
    marginBottom: 8,
    marginTop: 10,
    marginLeft: 4,
    marginRight: 4,
    textAlign: 'left',
  },
  year: {
    textAlign: 'center',
  },
  rightContainer: {
    flex: 1,
  },
  topContainer:{
    flex:1,
    height : 30,
    backgroundColor: 'LightGray',
  },
   thumbnail: {
    width: 400,
    height: 200,
  },
    listView: {
    paddingTop: 0,
    marginBottom: 44,
    backgroundColor: 'LightGray',
  },
    navItem: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  // top{
  //   height:60,
  //   flex: 1,
  // },
 });
 module.exports = MyListViewDemo;