content: /**
   * Created by 58484 on 2016/9/30.
   */
  
  import React, { Component } from 'react';
  import {
      AppRegistry,
      StyleSheet,
      Text,
      View,
      TouchableOpacity,
      TextInput
  } from 'react-native';
  
  var Dimensions = require('Dimensions');
  var {width} = Dimensions.get('window');
  
  var Search = React.createClass({
      render() {
          return (
              <View style={styles.container}>
                  <View style={styles.searchHeader}>
                      <Text>杭州&or;</Text>
                      <View style={styles.TextInputWrap}>
                          <TextInput
                              style={styles.textInput}
                              placeholder="搜索你喜欢的二货"
                              placeholderTextColor="#999"
                              autoFocus={true}
                          />
                      </View>
                      <TouchableOpacity onPress={()=>{this.popToHome()}}>
                          <Text style={{color: 'red'}}>取消</Text>
                      </TouchableOpacity>
                  </View>
                  <View style={styles.guess}>
                      <View style={styles.guessTitle}>
                          <Text style={styles.guessName}>猜你喜欢</Text>
                      </View>
                      <View style={styles.guessBody}>
                          <View style={styles.guessItem}><Text style={styles.guessItemText}>Python</Text></View>
                          <View style={styles.guessItem}><Text style={styles.guessItemText}>前端开发</Text></View>
                          <View style={styles.guessItem}><Text style={styles.guessItemText}>IOS</Text></View>
                          <View style={styles.guessItem}><Text style={styles.guessItemText}>小毛炉科技</Text></View>
                          <View style={styles.guessItem}><Text style={styles.guessItemText}>欢乐书客</Text></View>
                          <View style={styles.guessItem}><Text style={styles.guessItemText}>全家科技</Text></View>
                      </View>
                  </View>
              </View>
          );
      },
      popToHome(){
          if(this.props.show){
              this.props.show(true);
          }
          this.props.navigator.pop();
      }
  });
  
  const styles = StyleSheet.create({
      container: {
          flex: 1,
          backgroundColor: "#efefef"
      },
      searchHeader: {
          height: 50,
          backgroundColor: '#f5f5f5',
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-around'
      },
      TextInputWrap: {
          width: width * 0.7,
          backgroundColor: '#ccc',
          borderRadius: 15,
          height: 30,
      },
      textInput: {
          backgroundColor: '#ccc',
          width: width * 0.7 - 30,
          height: 40,
          marginLeft: 15,
      },
      guess: {
          margin: 10,
      },
      guessName: {
          color: '#000',
          fontSize: 12
      },
      guessBody: {
          flexDirection: 'row',
          flexWrap: 'wrap'
      },
      guessItem: {
          height: 24,
          paddingLeft: 10,
          paddingRight: 10,
          borderWidth: 1,
          borderColor: '#ccc',
          borderRadius: 13,
          marginTop: 10,
          marginRight: 10,
      },
      guessItemText: {
          color: '#11BFA2',
          fontSize: 12,
          height: 24,
          marginTop: 2
      },
  });
  
  module.exports = Search;