huiliao-app/huiliaoAPP/src/pages/Contact/AddFriend/index.js

import React from 'react';
import { Image, ScrollView, Alert ,StyleSheet, Text, View,TextInput } from 'react-native';
import Button from 'antd-mobile-rn/lib/button';
import { List,Switch,SearchBar } from 'antd-mobile-rn';

import {Icon,Device} from '../../../tool'

const Item = List.Item;
const Brief = Item.Brief;



export default class AddFriend extends React.Component {
  constructor(props) {
    super(props);
    this. state = {
      //value: '美食',
    };
  }

  static navigationOptions ={
    title:'添加朋友'
   }
  onBlur = (value) => {
   //跳转
  }

  render() {
    return (
      <View style={{backgroundColor:"#f0f0f0" }}>
        <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
              />
          </View>
        </View>
        <View style={styles.idTitle}>
          <Text style={styles.idLabel}>我的ID号:12345</Text>
          <Image style={styles.idEWM}  source={Icon.Contact.code}/>
        </View>
       
        <View style={styles.listWrap}>
          <View style={styles.list}>
             <Image style={styles.scanImg} source={Icon.Contact.scan}/>
             <View style={styles.listTitle}>
               <Text style={styles.listOne}>扫一扫</Text>
               <Text style={styles.listTwo}>扫描二维码名片</Text>
             </View>
             <Image style={styles.inImg} source={Icon.in}/>
          </View>
          <View style={styles.list}>
             <Image style={styles.scanImg} source={Icon.Contact.phoneCall}/>
             <View style={styles.listTitle}>
               <Text style={styles.listOne}>手机联系人</Text>
               <Text style={styles.listTwo}>添加或邀请通讯录中的朋友</Text>
             </View>
             <Image style={styles.inImg}  source={Icon.in}/>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  view:{
    backgroundColor:"#000",
    height:50,
  },

  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  searchBarWrap:{
    backgroundColor:'#f0f0f0',
    height:58,
    // paddingLeft:8,
    // paddingRight:8,
    // paddingTop:11,
    // paddingBottom:11,
  },
  serchWrap:{
    borderRadius:8,
    height:36,
    backgroundColor:"#fff",
    flexDirection:"row",
    alignItems:"center",
    marginBottom:11,
    marginTop:11,
    marginLeft:8,
    marginRight:8,
  },
  searchImg:{
    width:17,
    height:17,
     marginLeft:8,
     marginRight:6,
  },
  searchBar:{
    width:320,
    paddingBottom:0,
    padding:0,
    height:36,
  },
  idTitle:{
    flexDirection:"row",
    justifyContent:"center",
    alignItems:"center",
    height:58,
    paddingBottom:24
  },
  idLabel:{
    fontSize:10,
    color:"#9b9a9a",
    paddingRight:5
  },
  idEWM:{
    width:17,
    height:17,
  },
  phoneImg:{
    width:23,
    height:32,
    marginBottom:8,
    marginTop:23,
  },
  phoneCont:{  
    height:99,
    backgroundColor:"#fff",
    flexDirection:"column",
    alignItems: 'center',
    borderTopColor:'#000',
    borderBottomColor:'#000',
    borderTopWidth:1,
    borderBottomWidth:1,
    borderTopColor:"#d8d8d8",
    borderBottomColor:"#d8d8d8",
  },
  labelName:{
    fontSize:11,
    color:'#858484',
    
   
  },
  listWrap:{
    paddingLeft:10,
    marginTop:10,
    backgroundColor:"#FFF",
    borderBottomColor:"#e5e5e5",
    borderBottomWidth:1,
    borderTopColor:"#e5e5e5",
    borderTopWidth:1,
  },
  list:{
    height:55,
    borderBottomColor:"#e5e5e5",
    borderBottomWidth:1,
    flexDirection:"row",
    justifyContent:"center",
    alignItems:"center",
    paddingRight:10,
    },
  scanImg:{
    width:38,
    height:38,
  },
  inImg:{
    width:9,
    height:14,
  },
  listTitle:{
    flex:1,
    paddingLeft:10,
  },
  listOne:{
    fontSize:14,
    color:"#000",
  },
  listTwo:{
    fontSize:10,
    color:"#000",
    marginTop:8,
    opacity:0.6
  },
  isAdd:{
    width:55,
    height:26,
    backgroundColor:"#1bc3fa",
    borderRadius:5,
    fontSize:13,
    color:"#fff",
    lineHeight:26,
    textAlign:"center"
  }
});