优化

Class/View/CollectListView.js

@@ -0,0 +1,141 @@
+//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';
+var MessageInfoManager = require('react-native').NativeModules.MessageInfoManager;
+
+export default class CollectListView 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(){
+    return new Promise((resolve, reject)=>{
+        MessageInfoManager.getMessageArrWithCallBack((err,responseData)=>{
+            if (err) {
+              AlertIOS.alert('没有数据');
+              reject(err);
+            }else{
+              if(responseData){
+                  this.setState({
+                  dataSource: this.state.dataSource.cloneWithRows(responseData),
+                });
+                resolve(responseData.datas);
+              }else{
+                reject('none');
+              }
+          }
+        });
+      });
+  }
+
+ 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 = CollectListView;

Class/View/Info.js

@@ -0,0 +1,197 @@
+
+'use strict';
+import React, {
+  AppRegistry,
+  Component,
+  StyleSheet,
+  ListView,
+  Text,
+  View,
+  Image,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  AlertIOS,
+  ActivityIndicatorIOS,
+  ActionSheetIOS,
+  SegmentedControlIOS,
+  CameraRoll,
+  Clipboard,
+
+} from 'react-native';
+
+var MessageInfoManager = require('react-native').NativeModules.MessageInfoManager;
+var ASHUIMenuControllerManager = require('react-native').NativeModules.ASHUIMenuControllerManager;
+var ASHUtilManager = require('react-native').NativeModules.ASHUtilManager;
+
+
+export default class Info extends Component{
+  constructor(props) {
+    super(props);
+    this.state = {
+      isCollected: false,
+      saveRet:[],
+      textPressed: 'black',
+    };
+    
+    this.reSetNavItems();
+  }
+  reSetNavItems(){
+    this.props.navComponent.setNavItems({
+      rightItem: {
+        component: (
+          <TouchableOpacity style={[styles.navItem, {marginRight: 20}]}>
+            <Text>{this.state.isCollected?'取消收藏':'收藏'}</Text>
+          </TouchableOpacity>
+        ),
+        event: function() {
+          this.collectBtnClick();
+        }.bind(this)
+      },
+      title:{
+        component: (
+          <View
+            style={styles.segmentControlContainer} >
+            <Text>详情页</Text>
+          </View>
+        )
+      },
+    });
+    
+  }
+  collectBtnClick(){
+    if (this.state.isCollected) {
+      MessageInfoManager.delWithKey(this.props.movie.id, (error,ret)=>{
+        if (ret) {
+          this.setState({isCollected:false});
+              AlertIOS.alert('取消收藏成功');
+              this.reSetNavItems();
+              this.props.navComponent.reloadView();
+            }else{
+              AlertIOS.alert('取消收藏失败');
+            }
+      });
+              
+    }else{
+      
+        
+        MessageInfoManager.saveMessageWithKey(this.props.movie.id,this.props.movie.imageurl,this.props.movie.title,(error,ret)=>{
+          if(error){
+            console.log(error);
+          }else{
+              this.setState({isCollected:true});
+              AlertIOS.alert('收藏成功');
+              this.reSetNavItems();
+              this.props.navComponent.reloadView();
+          }
+        });
+
+    }
+    
+  }
+  pushPage() {
+    this.props.navigator.push({
+      title: 'New Page',
+      component: <AnotherNewPage/>
+    });
+  }
+  componentDidMount(){
+    MessageInfoManager.isExistWithKey(this.props.movie.id,(error,ret)=>{
+      if (ret) {
+        this.setState({isCollected:true});
+        this.reSetNavItems();
+        this.props.navComponent.reloadView();
+      };
+
+    });
+  }
+  render() {
+
+    return (
+      <TouchableWithoutFeedback onPress={this.hideMenu.bind(this)}>
+      <View style={styles.tabContentStyle}>
+      <TouchableWithoutFeedback onLongPress={this.onImagePress.bind(this)} onPress={this.hideMenu.bind(this)}>
+         <Image
+          ref={'image'}
+          source={{uri: this.props.movie.imageurl}}
+          style={styles.thumbnail}/>
+      </TouchableWithoutFeedback>
+        <View style={styles.rightContainer}>
+        <TouchableWithoutFeedback onLongPress={this.onTextPress.bind(this)}>
+          <Text style={[styles.title,{color:this.state.textPressed}]}>{this.props.movie.title}</Text>
+        </TouchableWithoutFeedback>
+        </View>
+      </View>
+      </TouchableWithoutFeedback>
+    );
+  }
+  onTextPress(e: Event){
+    this.setState({textPressed:'#61BFA9'});
+    ASHUIMenuControllerManager.showMenuWithTitleArr(['复制文本'], e.nativeEvent.pageX, e.nativeEvent.pageY,(error,ret)=>{
+      this.hideMenu();
+      // ASHUtilManager.pasteWithText(this.props.movie.title);
+      Clipboard.setString(this.props.movie.title);
+    });
+  }
+  hideMenu(e: Event){
+    ASHUIMenuControllerManager.hideMenu();
+    this.setState({textPressed:'black'});
+  }
+  onImagePress(e: Event){
+    ASHUIMenuControllerManager.showMenuWithTitleArr(['保存'], e.nativeEvent.pageX, e.nativeEvent.pageY,(error,ret)=>{
+      CameraRoll.saveImageWithTag(this.props.movie.imageurl,(ret)=>{
+        console.log(ret+'save image success');
+        AlertIOS.alert('保存成功');
+      },(error)=>{
+        console.log('error on save image');
+        AlertIOS.alert('保存失败');
+      })
+    });
+  }
+}
+
+var styles = StyleSheet.create({
+     thumbnail: {
+    width: 400,
+    height: 200,
+    marginTop:30,
+    },
+   rightContainer: {
+    flex: 1,
+    marginTop:30,
+    },
+    segmentControlContainer:{
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    segmentControl: {
+        width: 160
+    },
+    navItem: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  tabContentStyle: {
+    flex: 1,
+    backgroundColor: '#ebebeb',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  textStyle: {
+    color: '#333333',
+    marginBottom: 25,
+    fontSize: 17
+  },
+   title: {
+    fontSize: 15,
+    marginBottom: 8,
+    marginLeft: 5,
+    marginRight: 5,
+    textAlign: 'left',
+    borderWidth: 0,
+    borderColor: '#333333',
+  },
+});
+
+

Class/View/MyListView.js

@@ -0,0 +1,212 @@
+//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;

Class/View/RandListView.js

@@ -0,0 +1,146 @@
+//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 RandListView 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 = RandListView;