huiliao-app/huiliaoAPP/src/pages/Contact/components/ContactList/index.js

import React, { Component } from 'react'
import {
  SafeAreaView,
  View,
  Text,
  Image,
  FlatList,
  StyleSheet,
  TouchableOpacity,
} from 'react-native'
import {connect} from 'react-redux'
import 'pinyin4js'
import {Device,Icon} from '../../../../tool'
import  SearchBar from '../searchBar'
import ItemInContact from '../ItemInContact';
import SeparatorLine from './SeparatorLine';


 class ContactList extends Component {

  constructor(props) {
    super(props)
    this.state = {
      contacts: [
        {id: 101, username: '阿菊',telphone:15528300169},
        {id: 102, username: '爱莲',telphone:15528300169},
        {id: 103, username: '昂立拉克',telphone:15528300169},
        {id: 104, username: '冰冰',telphone:15528300169},
        {id: 101, username: '阿菊1'},
        {id: 105, username: '贝贝'},
        {id: 106, username: '陈伟'},
        {id: 107, username: '程浩'},
        {id: 108, username: '点啥'},
        {id: 109, username: '到啥'},
        {id: 108, username: '鄂啥'},
        {id: 108, username: '峨啥'},
        {id: 108, username: '方啥'},
        {id: 108, username: '付啥'},
        {id: 108, username: '丰啥'},
        {id: 108, username: '关啥'},
        {id: 108, username: '高啥'},
        {id: 108, username: '黄啥'},
        {id: 108, username: '解啥'},
        {id: 108, username: '文杰'},
        {id: 108, username: '也文杰'},
        {id: 108, username: 'YYH'},
        {id: 108, username: 'yYH'},
        {id: 108, username: '#*'},
        {id: 108, username: '!*'},
        {id: 108, username: '@*'},
        {id: 108, username: '张龙'},
        {id: 108, username: ' A张龙'},
        {id: 108, username: 'B张龙'},
      ],
      labels: [],
    }
  }
  componentWillMount() {

    // console.log(this.props)
    this._dataConvert(this._pySegSort(this.state.contacts, 'username'))

  }
  componentDidMount() {

  }

  // 排序并添加首字母
  _pySegSort(arr, key) {
    const letters = "abcdefghjklmnopqrstwxyz".split('')
    let segs = []
    let curr
    let otherName = []

    let t = new Date()

    arr.map((a,m)=>{
        let firstKey = a[key][0]
        let reg = new RegExp("^[A-Za-z\u4e00-\u9fa5]+$");
        if(!reg.test(firstKey)){
            otherName.push(JSON.parse(JSON.stringify(a)))
        }
    })
    letters.map((l,i) => {
      curr = {label: l.toUpperCase(), data:[]}


      arr.map((a,m) =>{
        if(a[key]=='') return 
        let firstKey = a[key][0]
        let nameKey = PinyinHelper.convertToPinyinString(a[key], '', PinyinFormat.FIRST_LETTER)[0].toUpperCase()

        if(nameKey===l.toUpperCase()){
          curr.data.push(JSON.parse(JSON.stringify(a)))
          arr[m][key]=''
        }

      })
      if(curr.data.length) {
        segs.push(curr)
        curr.data.sort(function(a,b){
          return a[key].localeCompare(b[key])
        })
      }
    })

    console.log(new Date() -t)
    segs.push({
        label:'#',
        data:otherName
    })
    segs.unshift({
        label:'@',
        data:[]
    })
    return segs
  }
  // 转换成 FlatList 需要的数据
  _dataConvert(names) {
    if (!names || names.length === 0) {
      return
    }
    let contacts = []
    let labels = []
    let index = 0
    let labelItem = {}
    names.map((item) => {
      labelItem = {
        index: index,
        label: item.label
      }
      contacts.push(labelItem)
      labels.push(labelItem)
      index++
      if (item.data && item.data.length > 0) {
        item.data.map((nameItem) => {
          contacts.push({ index: index, ...nameItem })
          index++
        })
      }
    })
    this.setState({
      contacts: contacts,
      labels: labels
    })
  }

  render() {
    const { contacts, labels } = this.state
    const {navigation} =this.props.props
    const scollTo = (item) => {
      // 当viewPosition 为 0 时将它滚动到屏幕顶部，为 1 时将它滚动到屏幕底部，为 0.5 时将它滚动到屏幕中央。
      this._flatList.scrollToIndex({viewPosition:0, index:item.index})
    }
    const renderItem = ({item}) => {
      const onPress = () => {
        navigation.navigate({ routeName:"DetailedInfo" })
      }


      if(item.index===0){
          return (<SearchBar props={this.props.props}/>)
      }
      return (
        item.id ?
          <TouchableOpacity style={styles.listItem} onPress={onPress}>
           <ItemInContact item={item} props={this.props.props}></ItemInContact>
          </TouchableOpacity> :
          <View style={styles.labelItem}>
          {/* title */}
            <Text style={styles.itemLabel}>{`${item.label}`}</Text> 
          </View>
      )
    }
    return (
      <SafeAreaView style={styles.container}>
        <FlatList data={contacts}
                  keyExtractor={(item, index) => index + ''}
                  ref={(flatList)=>this._flatList = flatList}
                  ItemSeparatorComponent={() => <SeparatorLine />}
                  showsVerticalScrollIndicator = {false}
                  renderItem={renderItem}/>
                   
        <View style={styles.slideCtn}>
          {labels.map((item) =>{
              if(item.index===0 && item.label==='@'){
                  return (
                    <TouchableOpacity
                    key={item.label}
                    style={styles.labelCtn}
                    onPress={()=> scollTo(item)}>
                        <Image 
                        style={{width:Device.scale(12),height:Device.scale(12)}}
                        source={Icon.Contact.search}></Image>
                    </TouchableOpacity>
                  )
              }
              return (
                <TouchableOpacity
                key={item.label}
                style={styles.labelCtn}
                onPress={()=> scollTo(item)}>
                <Text style={styles.slideLabel}>{item.label}</Text>
              </TouchableOpacity>
              )
          }
            
          )}
        </View>
      </SafeAreaView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white'
  },
  listItem: {
    height: Device.scale(45),
    justifyContent: 'center',
    // marginLeft:Device.scale(20),
    height:Device.scale(55)
  },
  labelItem: {
    justifyContent: 'center',
    backgroundColor: '#f0f0f0',
    height:Device.scale(25)
  },
  itemLabel: {
    fontSize: Device.scale(17),
    color: 'rgba(0,0,0,0.5)',
    marginLeft: Device.scale(10),
    // fontWeight: 'bold',
    fontSize:Device.scale(15)
  },
  itemName: {
    fontSize: Device.scale(16),
    color: '#4C5361',
    marginLeft: Device.scale(10)
  },
  slideCtn: {
    top: Device.scale(80),
    right: 0,
    position: 'absolute',
    backgroundColor: 'transparent',
    alignItems: 'center',
  },
  labelCtn: {
    paddingLeft: Device.scale(10),
    paddingRight: Device.scale(10),
    paddingTop:Device.scale(3),
    paddingBottom:Device.scale(3)
  },
  slideLabel: {
    color: '#504f4f',
    fontSize: Device.scale(9),
  },
})

export default connect()(ContactList);