add list component

Author: lh_wang

nearby/Nearby/index.js

@@ -43,7 +43,8 @@ var Nearby = React.createClass({
               style={styles.container}
               initialRoute={{
                 component: Food,
-                title: '美食'
+                title: '美食',
+                rightButtonTitle:'地图',
               }}
               />
           </TabBarIOS.Item>
@@ -60,7 +61,8 @@ var Nearby = React.createClass({
               tintColor="#fff"
               initialRoute={{
                 component: Film,
-                title: '电影'
+                title: '电影',
+                rightButtonTitle:'地图',
               }}
               />
           </TabBarIOS.Item>
@@ -77,24 +79,27 @@ var Nearby = React.createClass({
               tintColor="#fff"
               initialRoute={{
                 component: Bank,
-                title: '银行'
+                title: '银行',
+                rightButtonTitle:'地图',
               }}
               />
           </TabBarIOS.Item>
 
           <TabBarIOS.Item
-            title='厕所'
-            selected={this.state.selected === '厕所'}
+            title='卫生间'
+            selected={this.state.selected === '卫生间'}
             icon={require("image!toilet")}
-            onPress={()=>{this.setState({selected: '厕所'})}}>
+            onPress={()=>{this.setState({selected: '卫生间'})}}>
             <NavigatorIOS
               style={styles.container}
               barTintColor='#007AFF'
               titleTextColor="#fff"
               tintColor="#fff"
               initialRoute={{
                 component: Toilet,
-                title: '厕所'
+                title: '卫生间',
+                rightButtonTitle:'地图',
+                onRightButtonPress: function(){alert(0)}
               }}
               />
           </TabBarIOS.Item>

nearby/Nearby/views/bank.js

@@ -1,16 +1,12 @@
-var React = require('react-native');
-
-var {
-  View
-} = React;
 
+var React = require('react-native');
+var List = require('./list');
 var Bank = React.createClass({
   render: function(){
-    return (
-      <View></View>
+    return(
+      <List type="银行" nav={this.props.navigator}/>
     );
   }
 });
 
 module.exports = Bank;
-

nearby/Nearby/views/foodDetail.js renamed to nearby/Nearby/views/detail.js

@@ -1,16 +1,12 @@
-var React = require('react-native');
-
-var {
-  View
-  } = React;
 
+var React = require('react-native');
+var List = require('./list');
 var Film = React.createClass({
   render: function(){
-    return (
-      <View></View>
+    return(
+      <List type="电影院" nav={this.props.navigator}/>
     );
   }
 });
 
 module.exports = Film;
-

nearby/Nearby/views/film.js

@@ -1,203 +1,12 @@
-var React = require('react-native');
-var Util = require('./util');
-var FoodDetail = require('./foodDetail');
-
-var {
-  View,
-  ScrollView,
-  Text,
-  StyleSheet,
-  TextInput,
-  ActivityIndicatorIOS,
-  TouchableOpacity
-  } = React;
 
+var React = require('react-native');
+var List = require('./list');
 var Food = React.createClass({
-  getInitialState: function() {
-    return {
-      list: null,
-      count: 0,
-      keywords: ''
-    };
-  },
   render: function(){
-    var items = [];
-    if(this.state.list){
-      var len = this.state.list.length > 10 ? 10 : this.state.list.length;
-      for(var i = 0; i < len; i++){
-        var obj = this.state.list[i];
-        items.push(
-          <TouchableOpacity style={styles.item} onPress={this._loadDetail.bind(this, obj.id, obj.name)}>
-            <View style={styles.row}>
-              <View style={{flex:1}}>
-                <Text numberOfLines={1} style={styles.name}>{obj.name}</Text>
-                <Text numberOfLines={1} style={styles.type}>{obj.type}</Text>
-              </View>
-              <View style={styles.distance}>
-                <Text numberOfLines={1} style={styles.mi}>{obj.distance}米</Text>
-                <Text numberOfLines={1} style={styles.address}>{obj.address}</Text>
-              </View>
-            </View>
-
-            <TouchableOpacity style={styles.phone}>
-              <Text numberOfLines={1} >电话</Text>
-            </TouchableOpacity>
-          </TouchableOpacity>
-        );
-      }
-    }
-    return (
-      <ScrollView style={styles.container}>
-        <View style={styles.searchBg}>
-          <TextInput style={styles.input} placeholder="搜索美食"
-                     onChangeText={this._onChangeText}
-                     onEndEditing={this._onEndEditing}/>
-          <View>
-            <Text style={styles.tip}>
-              已为您筛选
-              <Text style={{color:'#FA2530'}}>{this.state.count}</Text>
-              条数据
-            </Text>
-          </View>
-        </View>
-        {items}
-        {items.length? null : <View style={styles.activity}><ActivityIndicatorIOS color="#248BFD"/></View>}
-        <View style={{height:40}}></View>
-      </ScrollView>
+    return(
+      <List type="餐饮" nav={this.props.navigator}/>
     );
-  },
-  componentDidMount: function(){
-    var url = Util.searchURL + 'key=' + Util.amapKey + '&keywords=美食&location=121.390686,31.213976&extensions=base';
-    var that = this;
-    Util.getJSON(url, function(data){
-      if(data.status && data.info === 'OK'){
-        var count = data.pois.length > 10? 10: data.pois.length;
-        that.setState({
-          list: data.pois,
-          count: count
-        });
-      }else{
-        alert('没有查询到相应的数据');
-      }
-    });
-  },
-
-  /*加载详情页*/
-  _loadDetail: function(id, name){
-    this.props.navigator.push({
-      component: FoodDetail,
-      title: name,
-      passProps:{
-        id: id
-      }
-    });
-  },
-
-  _onChangeText: function(val){
-    this.setState({
-      keywords: val
-    });
-  },
-  _onEndEditing: function(){
-    var that = this;
-    var keywords = this.state.keywords;
-    var url = Util.searchURL + 'key=' + Util.amapKey + '&keywords='
-      + keywords + '&types=餐饮&location=121.390686,31.213976&extensions=base';
-    that.setState({
-      list: null
-    });
-    Util.getJSON(url, function(data){
-      if(data.status && data.info === 'OK' && data.pois.length){
-        var count = data.pois.length > 10? 10: data.pois.length;
-        that.setState({
-          list: data.pois,
-          count: count
-        });
-      }else{
-        alert('没有查询到相应的数据');
-      }
-    });
   }
-
 });
-
-var styles = StyleSheet.create({
-  container:{
-    flex:1,
-    backgroundColor:'#ddd'
-  },
-  input:{
-    height:38,
-    marginLeft:10,
-    marginRight:10,
-    borderWidth:Util.pixel,
-    paddingLeft:5,
-    marginTop:10,
-    borderColor: '#868687',
-    borderRadius:3,
-    fontSize:15
-  },
-  tip:{
-    fontSize:12,
-    marginLeft:10,
-    marginTop:5,
-    color: '#505050'
-  },
-  row:{
-    flexDirection:'row',
-    marginLeft:10,
-    marginRight:10,
-    marginTop:10,
-    paddingTop:5
-  },
-  distance:{
-    width:120,
-    alignItems:'flex-end',
-  },
-  name:{
-    fontSize:15,
-    marginBottom:6
-  },
-  type:{
-    fontSize:12,
-    color:'#686868'
-  },
-  mi:{
-    fontSize:12,
-    color:'#686868'
-  },
-  address:{
-    fontSize:14,
-    color:'#686868'
-  },
-  phone:{
-    marginLeft:10,
-    marginRight:10,
-    height:33,
-    marginTop:10,
-    justifyContent:'center',
-    alignItems:'center',
-    borderWidth:Util.pixel,
-    borderColor:'#ccc'
-  },
-  searchBg:{
-    backgroundColor:'#fff',
-    paddingBottom:10
-  },
-  item:{
-    marginTop:10,
-    backgroundColor:'#fff',
-    paddingBottom:10,
-    borderTopWidth:Util.pixel,
-    borderBottomWidth:Util.pixel,
-    borderColor:'#ccc'
-  },
-  activity:{
-    marginTop:50,
-    justifyContent:'center',
-    alignItems:'center',
-  }
-});
-
 module.exports = Food;