huiliao-app/huiliaoAPP/src/pages/Contact/components/searchBar.js

import React from 'react';
import { Image, ScrollView,TextInput} from 'react-native';
import { StyleSheet, Text, View } from 'react-native';
import { List } from 'antd-mobile-rn';
import {Icon,Device} from '../../../tool'
import {connect} from 'react-redux'



class SearchBar extends React.Component {

  constructor(props){
    super(props)
  }

  render() {
    const {navigation} =this.props.props
    return (
      <View style={styles.searchBarWrap}>
      <View style={styles.serchWrap}>
         <Image style={styles.searchImg} source={Icon.Contact.search}/>
         {/* <TextInput
            style={[styles.searchBar,{padding:0}]}
            placeholder="手机号/ID号搜索"
          
           onFocus={()=>{
            navigation.navigate({ routeName:"Search" })
           }}
          /> */}
          <Text
             style={[styles.searchBar,{padding:0}]}
             onPress={()=>{
              navigation.navigate({ routeName:"Search" })
             }}
          >
             手机号/ID号搜索
          </Text>
      </View>
      <View style={styles.tip}>
        <View style={[styles.tip1,{borderBottomWidth:1}]}
        onTouchStart={()=>{
          navigation.navigate({ routeName:"NewFriend" })
        }}
        
        >
          <Image style={styles.iconImg} source={Icon.Contact.newFriendIcon}/>
          <Text style={styles.tipTitle}>新的朋友</Text>
        </View>
        <View style={styles.tip1}>
          <Image style={styles.iconImg} source={Icon.Contact.groupChatIcon}/>
          <Text style={styles.tipTitle}>群聊</Text>
        </View>
      </View>
  </View>
    );
  }
}

export default  connect()(SearchBar) ;
const styles = StyleSheet.create({
  searchBarWrap:{
    backgroundColor:'#f0f0f0',
    height:Device.scale(170),
  },
  serchWrap:{
    borderRadius:Device.scale(8),
    height:Device.scale(36),
    backgroundColor:"#fff",
    flexDirection:"row",
    alignItems:"center",
    marginBottom:Device.scale(11),
    marginTop:Device.scale(11),
    marginLeft:Device.scale(10),
    marginRight:Device.scale(10),
    borderWidth:1,
    borderColor:'#c4c4c4'
  },
  searchImg:{
    width:Device.scale(17),
    height:Device.scale(17),
     marginLeft:Device.scale(8),
     marginRight:Device.scale(6),
  },
  
  searchBar:{
    width:Device.scale(320),
    paddingBottom:0,
    padding:0,
    height:Device.scale(36),
    lineHeight:Device.scale(36),
    color:'rgba(0,0,0,0.3)'
  },
  tip:{
    borderTopWidth:1,
    borderColor:"rgba(0,0,0,0.1)",
    height:Device.scale(113),
    backgroundColor:'#fff',
    // borderBottomWidth:1
  },

  tip1:{
    flexDirection:"row",
    alignItems:"center",
    height:Device.scale(55),
    borderColor:"rgba(0,0,0,0.1)",
    marginLeft:Device.scale(11),
  },
  iconImg:{
    width:Device.scale(38),
    height:Device.scale(38),
    borderRadius:Device.scale(5),
    marginRight:Device.scale(10),
  }
});