huiliao-app/huiliaoAPP/src/pages/Contact/NewFriend/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'
import commonStyles from '../../../styles/styles'

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



export default class App extends React.Component {
  constructor(props) {
    super(props);
    this. state = {
      //value: '美食',
    };
  }
  static navigationOptions ={
    title:'新的朋友'
   }
  onBlur = (value) => {
   //跳转
  }

  render() {
    const btn=(hasClick)=>{
      if(hasClick){
        return (
          // <Button></Button>
          <Text>2345</Text>
        )
      }else{
        return(
          <Text>123</Text>
        )
        
      }
    
    }
    return (
      <View style={commonStyles.page}>
        <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.phoneCont}>
          <Image style={styles.phoneImg} source={Icon.Contact.phone}/>
          <Text style={styles.labelName} >添加手机联系人</Text>
        </View>
        <View style={styles.listWrap}>
          <View style={styles.list}>
             <Image 
              style={styles.scanImg}
              source={Icon.Contact.scan}
              onPress={()=>{
                alert(1)
              }}
              />
             <View style={styles.listTitle}>
               <Text style={styles.listOne}>胡桃夹子</Text>
               <Text style={styles.listTwo}>可以加好友吗可以加好友吗可以加好友吗可以加好友吗</Text>
             </View>
             <View style={styles.isAdd}>
              <Text style={styles.isAdd1}>已添加</Text>
             </View>
          </View>

          <View style={styles.list}>
             <Image 
              style={styles.scanImg}
              source={Icon.Contact.scan}
              onPress={()=>{
                alert(1)
              }}
              />
             <View style={styles.listTitle}>
               <Text style={styles.listOne}>胡桃夹子</Text>
               <Text style={styles.listTwo}>可以加好友吗可以加好友吗可以加好友吗可以加好友吗</Text>
             </View>
             <View style={styles.isAdd}>
              <Text style={styles.isAdd1}>已添加</Text>
             </View>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({

  searchBarWrap:{
    backgroundColor:'#f0f0f0',
    height:Device.scale(58),
  },
  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(8),
    marginRight:Device.scale(8),
  },
  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),
  },
  phoneImg:{
    width:Device.scale(23),
    height:Device.scale(32),
    marginBottom:Device.scale(8),
    marginTop:Device.scale(23),
  },
  phoneCont:{  
    height:Device.scale(99),
    backgroundColor:"#fff",
    flexDirection:"column",
    alignItems: 'center',
    borderTopColor:'#000',
    borderBottomColor:'#000',
    borderTopWidth:1,
    borderBottomWidth:1,
    borderTopColor:"#d8d8d8",
    borderBottomColor:"#d8d8d8",
  },
  labelName:{
    fontSize:Device.scale(11),
    color:'#858484',
  },
  listWrap:{
    paddingLeft:Device.scale(10),
    marginTop:Device.scale(10),
    backgroundColor:"#FFF",
    borderBottomColor:"#e5e5e5",
    borderBottomWidth:1,
    borderTopColor:"#e5e5e5",
    borderTopWidth:1,
  },
  list:{
    height:Device.scale(55),
    borderBottomColor:"#e5e5e5",
    borderBottomWidth:1,
    flexDirection:"row",
    justifyContent:"center",
    alignItems:"center",
    paddingRight:Device.scale(10),
    },
  scanImg:{
    width:Device.scale(38),
    height:Device.scale(38),
  },
  listTitle:{
    flex:1,
    paddingLeft:Device.scale(10),
  },
  listOne:{
    fontSize:Device.scale(14),
    color:"#000",
  },
  listTwo:{
    fontSize:Device.scale(10),
    color:"#000",
    opacity:0.6,
    marginTop:8,
    width:Device.scale(190),
    height:Device.scale(12),
    // marginHorizontal: 5, 
    flexShrink: 1
  },
  isAdd:{
    width:Device.scale(55),
    height:Device.scale(26),
    backgroundColor:"#1bc3fa",
    borderRadius:Device.scale(5),
  },
  isAdd1:{
    fontSize:Device.scale(13),
    color:"#fff",
    lineHeight:Device.scale(26),
    textAlign:"center",
  }
});