2. 程式人生 > >React Native 仿微信通訊錄右側字母快捷操作區

React Native 仿微信通訊錄右側字母快捷操作區

阿新 • • 發佈：2019-02-04

其實也不能說仿微信，大部分通訊錄都一樣，先來看兩張效果圖

第一張是微信、第二張是我寫的

簡單介紹一下功能點

1、好友排序
2、點選右側快捷操作區，相應跳轉到所屬通訊錄區域
3、ScrollView 在滑動過程中自動匹配右側字母分類，同時作出UI更新

詳細講講

好友資訊資料結構

let typeList = [
  { nickname: '曾泰', picture: '', letter: 'Z' },
  { nickname: '狄仁傑', picture: '', letter: 'D' },
  { nickname: '李元芳', picture: '', letter: 'L'
 
 },
  ......
]

右側操作欄資料結構

let addressAllList = [
  { title: 'A', number: 0, scrollHeight: 0 },
  { title: 'B', number: 0, scrollHeight: 0 },
  { title: 'C', number: 0, scrollHeight: 0 },
  { title: 'D', number: 0, scrollHeight: 0 },
  { title: 'E', number: 0, scrollHeight: 0 },
  { title: 'F', number: 0, scrollHeight: 0
 
 }，
  ......
】

1、好友排序

這個是基本操作，沒什麼可說的，為了功能的完整性，純當做記錄吧

/** 對列表資訊進行排序 放在saga中進行處理 */
sortFriend () {
  this.friendListSource = typeList.sort((a, b) => { return a.letter.localeCompare(b.letter) })
}

2、點選右側快捷操作區，相應跳轉到所屬通訊錄區域

原理是這樣的，通過計算獲得，每個字母區間所包含的好友個數，相應的就能得到該字幕區間的高度Height值，如果有了ScrollView的y值和每一行的高度值，那麼我們就能精確的算出點選每個字母我們需要跳轉到的絕對位置，嗯

但前提是，我們需要精確的得到這兩個值

componentDidMount () {
  /** 獲取列表元件高度 */
  const that = this
  setTimeout(function () {
    that.refs.friendArea.measure((x, y, width, height, left, top) => {
      console.log('好友列表從高度' + y + '開始渲染***************')
      that.setState({ y })
    })
    that.refs.friendItem.measure((x, y, width, height, left, top) => {
      console.log('列表Item高度為' + height + '***************')
      that.rowHeight = height
      that.setState({ rowHeight: height })
    })
  })
}

接下來，我們就開始定量計算了

/** 右側通訊錄 */
sortAddress () {
  /**
   * 計算每層個數
   */
  let tempList = addressAllList
  typeList.map((item) => {
    addressAllList.map((element, index) => {
      if (element.title === item.letter) {
        let { number } = tempList[index]
        // console.log('出現一個相同項' + item.letter)
        tempList.splice(index, 1, { ...tempList[index], number: number + 1 })
      }
    })
  })
  /**
   * 計算每層y
   */
  tempList.map((item, index) => {
    let change = {}
    if (index === 0) {
      change = { ...item, scrollHeight: this.state.y }
    } else {
      const { scrollHeight, number } = this.addressListSource[index - 1]
      change = { ...item, scrollHeight: scrollHeight + number * this.state.rowHeight }
    }
    this.addressListSource.push(change)
  })
  // console.log(this.addressListSource)
  this.setState({ addressList: this.addressListSource })
}

介面操作呢？？？？

this.refs.scroll.scrollTo({ y: scrollHeight, animated: true })} 就好了

<View style={{ position: 'absolute', top: y, right: px2dp(6) }}>
  { addressList.map((item, index) => {
    const { title, number, scrollHeight } = item
    return (number !== 0 &&
    <TouchableWithoutFeedback onPress={() => this.refs.scroll.scrollTo({ y: scrollHeight, animated: true })} key={index}>
      <View style={{ width: px2dp(40), height: px2dp(40), borderRadius: px2dp(20), margin: px2dp(4), backgroundColor: onNumber !== index ? Colors.C8 : Colors.CB, justifyContent: 'center', alignItems: 'center' }}>
        <Text style={{ textAlign: 'center', fontSize: px2dp(24), color: onNumber !== index ? Colors.C3 : Colors.C8 }}>{title}</Text>
      </View>
    </TouchableWithoutFeedback>
    )
  })}
</View>

3、ScrollView 在滑動過程中自動匹配右側字母分類，同時作出UI更新

<ScrollView
 ref='scroll'
 /** onScroll 回撥頻率 */
 scrollEventThrottle={2}
 /* 滑動監聽 */
 onScroll={(e) => this.isScrollOn(e)}
 >

其中scrollEventThrottle是滑動的幀數反饋，number型別，代表多少幀呼叫一次 onScroll 事件，如果對位置變化比較敏感，建議設定的小一點的值，當number === 200 ，表示只調用一次onScroll事件，咱們這裡給一個2，位置的實時精度是比較高的

 /** 是否滑動到當前的層 */
 isScrollOn (e) {
   const y = e.nativeEvent.contentOffset.y
   /** 重複區間與異常值判斷 */
   if ((!(this.area.min && this.area.max && (y >= this.area.min && y < this.area.max)) && !(this.area.min && !this.area.max && y >= this.area.min) && !(y < this.state.y)) || (!this.area.min && !this.area.max)) {
     console.log('分層處理頻率**********************************')
     let addressListSource = this.addressListSource
     addressListSource.map((item, index) => {
       if (index <= addressListSource.length - 2) {
         if (y >= item.scrollHeight && y < addressListSource[index + 1].scrollHeight) {
           this.area = { min: item.scrollHeight, max: addressListSource[index + 1].scrollHeight }
           this.setState({ onNumber: index })
         }
       } else {
         if (y >= item.scrollHeight) {
           this.area = { min: item.scrollHeight, max: null }
           this.setState({ onNumber: index })
         }
       }
     })
   }
 }

由於我們的精度比較高，所以事件呼叫的頻率也比較高，所以我們對處理狀態和上一次的處理結果進行了儲存，下一次呼叫時會進行比對，如果條件一致，就不再處理，這樣處理頻率就會相當可控，效果還是比較不錯的，分塊講解可能不是很直觀，我就把全部程式碼貼出來，大家可以從全域性參考一下，歡迎提出建議


class MyPatientScreen extends Component {
  static navigationOptions = ({ navigation }) => ({
    title: '患者',
    ...ApplicationStyles.defaultHeaderStyle
  });

  constructor (props) {
    super(props)
    this.state = {
      refreshing: false,
      searchText: '',
      isFocused: false,
      addressList: [],
      friendList: [],
      y: 0,
      rowHeight: 0,
      onNumber: 0
    }
    /** functions */
    /** object */
    this.addressListSource = []
    this.friendListSource = []
    this.area = { min: null, max: null }
  }

  componentDidMount () {
    /** 獲取列表元件高度 */
    const that = this
    setTimeout(function () {
      that.refs.friendArea.measure((x, y, width, height, left, top) => {
        console.log('好友列表從高度' + y + '開始渲染***************')
        that.setState({ y })
      })
      that.refs.friendItem.measure((x, y, width, height, left, top) => {
        console.log('列表Item高度為' + height + '***************')
        that.rowHeight = height
        that.setState({ rowHeight: height })
      })
    })
  }

  componentWillReceiveProps (nextProps) {
    if (!this.props.isFocused && nextProps.isFocused) {
      this.onFocus()
    }
    if (this.props.isFocused && !nextProps.isFocused) {
      this.onBlur()
    }
  }

  componentWillUnmount () {
  }

  onFocus () {
    this.props.toggleTabBarAction(true)
    /** 對列表資訊進行排序 放在saga中進行處理 */
    // this.sortFriend()
    /** 右側通訊錄 */
    this.sortAddress()
  }

  onBlur () {}

  /** 對列表資訊進行排序 放在saga中進行處理 */
  sortFriend () {
    this.friendListSource = typeList.sort((a, b) => { return a.letter.localeCompare(b.letter) })
  }

  /** 右側通訊錄 */
  sortAddress () {
    /** ************************* 右側通訊錄 **********************************/
    /**
     * 計算每層個數
     */
    let tempList = addressAllList
    typeList.map((item) => {
      addressAllList.map((element, index) => {
        if (element.title === item.letter) {
          let { number } = tempList[index]
          // console.log('出現一個相同項' + item.letter)
          tempList.splice(index, 1, { ...tempList[index], number: number + 1 })
        }
      })
    })
    // console.log(tempList)
    /**
     * 計算每層y
     */
    tempList.map((item, index) => {
      let change = {}
      if (index === 0) {
        change = { ...item, scrollHeight: this.state.y }
      } else {
        const { scrollHeight, number } = this.addressListSource[index - 1]
        change = { ...item, scrollHeight: scrollHeight + number * this.state.rowHeight }
      }
      this.addressListSource.push(change)
    })
    // console.log(this.addressListSource)
    this.setState({ addressList: this.addressListSource })
  }

  /** 是否滑動到當前的層 */
  isScrollOn (e) {
    const y = e.nativeEvent.contentOffset.y
    /** 重複區間與異常值判斷 */
    if ((!(this.area.min && this.area.max && (y >= this.area.min && y < this.area.max)) && !(this.area.min && !this.area.max && y >= this.area.min) && !(y < this.state.y)) || (!this.area.min && !this.area.max)) {
      console.log('分層處理頻率**********************************')
      console.log(y)
      console.log(this.area)
      let addressListSource = this.addressListSource
      addressListSource.map((item, index) => {
        if (index <= addressListSource.length - 2) {
          if (y >= item.scrollHeight && y < addressListSource[index + 1].scrollHeight) {
            this.area = { min: item.scrollHeight, max: addressListSource[index + 1].scrollHeight }
            this.setState({ onNumber: index })
          }
        } else {
          if (y >= item.scrollHeight) {
            this.area = { min: item.scrollHeight, max: null }
            this.setState({ onNumber: index })
          }
        }
      })
    }
  }

  _contentViewScroll (e) {
    var offsetY = e.nativeEvent.contentOffset.y // 滑動距離
    var contentSizeHeight = e.nativeEvent.contentSize.height // scrollView contentSize高度
    var oriageScrollHeight = e.nativeEvent.layoutMeasurement.height // scrollView高度
    if (offsetY + oriageScrollHeight >= contentSizeHeight) {
      console.log('即將載入新資料********************')
    }
  }

  onRefresh () {
    const that = this
    this.setState({ refreshing: true })
    setTimeout(function () {
      that.setState({ refreshing: false })
    }, 1200)
  }

  render () {
    const { navigation } = this.props
    const { refreshing, searchText, isFocused, addressList, y, onNumber } = this.state
    return (
      <View style={{ flex: 1, backgroundColor: Colors.C8 }}>
        <ScrollView
          ref='scroll'
          automaticallyAdjustContentInsets={false}
          style={{ }}
          /** onScroll 回撥頻率 */
          scrollEventThrottle={2}
          onScroll={(e) => this.isScrollOn(e)}
          onMomentumScrollEnd={this._contentViewScroll.bind(this)}
          refreshControl={
            <RefreshControl
              refreshing={refreshing}
              onRefresh={this.onRefresh.bind(this)}
              tintColor='#999'
              title='重新整理請稍候...'
              titleColor='#999'
              colors={['#999', '#999', '#999']}
              progressBackgroundColor='#fff'
            />
          }
          >
          <View style={{ backgroundColor: Colors.C8, padding: px2dp(30) }}>
            <View style={{ borderWidth: 1, borderColor: Colors.C7, borderRadius: px2dp(10), paddingLeft: isFocused || searchText ? px2dp(70) : px2dp(0), justifyContent: 'center' }}>
              <TextInput ref={(e) => { if (e) this._textInput = e }} value={searchText} onChangeText={(text) => this.setState({ searchText: text })} style={{ height: px2dp(60), fontSize: px2dp(24) }} placeholder={isFocused && !searchText ? '搜尋' : ''} />
              { isFocused || searchText
                ? <View style={{ position: 'absolute', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', marginLeft: px2dp(20) }}>
                  <Icon name='search' size={px2dp(40)} color={Colors.C6} />
                </View>
                : <TouchableWithoutFeedback onPress={() => { this._textInput.focus(); this.setState({ isFocused: true }) }}>
                  <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', height: px2dp(60), marginTop: -px2dp(60) }}>
                    <Icon name='search' size={px2dp(40)} color={Colors.C6} />
                    <Text style={{ fontSize: px2dp(24), lineHeight: px2dp(34), color: Colors.C5, marginLeft: px2dp(10) }}>搜尋</Text>
                  </View>
                </TouchableWithoutFeedback>
              }
            </View>
            <TouchableOpacity onPress={() => navigation.navigate('newPatientList')}>
              <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', marginTop: px2dp(20) }}>
                <Icon name='profile' size={px2dp(80)} color={Colors.CB} />
                <Text style={{ fontSize: px2dp(24), lineHeight: px2dp(34), color: Colors.C3, marginLeft: px2dp(20) }}>新的患者</Text>
              </View>
            </TouchableOpacity>
            <View style={{ }} ref='friendArea'>
              {
                undefined !== typeList && typeList.length > 0 && typeList.map((item, index) => {
                  const { nickname, picture } = item
                  let checked = true
                  if (searchText && nickname.indexOf(searchText) === -1) return false
                  return (checked &&
                    <TouchableOpacity onPress={() => navigation.navigate('patientInfo')} key={index} ref='friendItem'>
                      <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', paddingTop: px2dp(20), paddingBottom: px2dp(20), borderBottomWidth: 1, borderBottomColor: Colors.C7 }}>
                        <Image source={require('../../Images/PersonalCenter/avatar.png')} style={{ width: px2dp(80), height: px2dp(80), borderRadius: px2dp(40) }} />
                        <Text style={{ fontSize: px2dp(24), lineHeight: px2dp(34), color: Colors.C3, marginLeft: px2dp(20) }}>{nickname}</Text>
                      </View>
                    </TouchableOpacity>
                  )
                })
              }
            </View>
          </View>
        </ScrollView>
        <View style={{ position: 'absolute', top: y, right: px2dp(6) }}>
          { addressList.map((item, index) => {
            const { title, number, scrollHeight } = item
            return (number !== 0 &&
            <TouchableWithoutFeedback onPress={() => this.refs.scroll.scrollTo({ y: scrollHeight, animated: true })} key={index}>
              <View style={{ width: px2dp(40), height: px2dp(40), borderRadius: px2dp(20), margin: px2dp(4), backgroundColor: onNumber !== index ? Colors.C8 : Colors.CB, justifyContent: 'center', alignItems: 'center' }}>
                <Text style={{ textAlign: 'center', fontSize: px2dp(24), color: onNumber !== index ? Colors.C3 : Colors.C8 }}>{title}</Text>
              </View>
            </TouchableWithoutFeedback>
            )
          })}
        </View>
      </View>
    )
  }
}

相關推薦

React Native 仿微信通訊錄右側字母快捷操作區

其實也不能說仿微信，大部分通訊錄都一樣，先來看兩張效果圖 第一張是微信、第二張是我寫的 簡單介紹一下功能點 1、好友排序 2、點選右側快捷操作區，相應跳轉到所屬通訊錄區域 3、ScrollView 在滑動過程中自動匹配右側字母分類，同時作出UI更新

React-仿微信通訊錄控制元件

起因:產品給了一個需求,要求寫一個跟微信朋友圈一樣,取首字母產生的通訊錄標籤頁, 寫了一遍,發現意外的好寫 最終效果 資料採用了隨機字串的方法,並且使用陣列方法排序, let data = []; let title = [];

Android 仿微信通訊錄功能，好友排序 + 字母索引

一、效果圖展示 二、功能特點 1.好友排序：按照拼音順序對好友進行排序，相容英文數字符號等 2.字母索引：右側字母導航條，既可拖動也可點選，聯動ListView滑動 三、實現 接下來就讓我們一步步顯示這個效果吧。 1.右側字母索引的導航條 這個我們可

【Android 仿微信通訊錄 導航分組列表-下】自定義View為RecyclerView打造右側索引導航欄IndexBar

本篇文章已授權微信公眾號 guolin_blog （郭霖）獨家釋出 一 概述 在上篇文章（http://blog.csdn.net/zxt0601/article/details/52355199）裡，我們用ItemDecoration為Recy

高仿微信通訊錄

專案用到了通訊錄，仿照微信通訊錄功能，結構很簡單。 列表：RecyclerView 頂部搜尋：自定義EditText 右側快速查詢：自定義view 沒有什麼複雜邏輯，用圖說話 需要注意的是資料格式，看後臺怎麼給資料，該例子是用的本地資料arrays.xml

react-native 解決微信分享、微信支付 因簽名不一致導致的分享失敗

當我們在做微信微博sdk分享的時候除錯非常麻煩，因為要使用對應的簽名版本才能呼叫sdk成功。 當我們使用AndroidStudio的Gradle之後會很簡單的解決這個問題。 1.我們把簽名檔案放到工程根目錄下（這樣做是為了保持路徑的統一） 2.在Gradle中引入如下程

react-native 實現微信頭部編寫

react-native 編寫微信頭部要點：   1、圖示佈局（左右居右、上下居中）   2、可以點選事件，點選時有個背景色佈局實現    1、在react-native中無法使用float、display:inline-block    2、使用Flexbox(彈性盒子):

微信聯絡人右側字母滑動索引

實現思路：通過自定義View在頻幕右側迴圈寫入a~z;複寫onTouchEvent @Override public boolean onTouchEvent(MotionEvent event) { switch (even

react-native 整合微信支付

上篇文章已經介紹過 react-native 整合支付寶，本篇文章將基於微信支付官方提供的整合文件，介紹如何將微信支付整合到 react-native 應用中。 場景介紹 適用於商戶在移動端APP中整合微信支付功能。 商戶APP呼叫微信提供的

Android仿微信通訊錄：懸停頭部分組列表

今日科技快訊 昨日，vivo與NBA在上海舉辦了戰略釋出會，宣佈vivo將成為NBA在中國唯一的手機

Android仿微信右側頂部下拉對話方塊

我們使用微信都知道，其右側頂部有一個下拉對話方塊，我們可以執行新增好友，掃一掃等功能，今天我們就來模仿實現一下這個功能（實現的方式有很多種，我今天只說一種藉助透明主題Activity的方式實現）；實現的效果如下： 下面就來說一說實現的思路（重要）： 第一步：建立彈

Android實現首字母導航條(仿微信)

本部落格介紹Android實現首字母導航條，先看張效果圖，具體怎麼實現看程式碼吧 具體的步驟 1.整體佈局的顯示 2. 實現A-Z的分組 3. 自定義A-Z的導航條 4. 中間顯示/隱藏觸控到導航條具體的字母 activity_main.xml <?xm

Android 使用RecyclerView實現（仿微信）的聯絡人A-Z字母排序和過濾搜尋功能

之前做專案的時候遇到一個需求是實現品牌的字母排序功能，網上的資料很多，但是有一部分有bug，這篇文章是我學習和解決部分bug之後的總結。今天帶來的是RecyclerView的A-Z字母排序和過濾搜尋功能。 首先上效果圖： 重點：1、實現資料排序分類 2、

仿手機和微信通訊錄A-Z姓名排序

轉載：http://download.csdn.net/download/xiaanming/6394377 前段時間因為換工作的緣故又恰巧碰到國慶節，所以有段時間自己沒有更新部落格了，過完國慶到新公司報道，感覺還不錯，就是現在住的地方離新公司有點遠，地鐵20站

Android 仿美團選擇城市、微信通訊錄、餓了麼點餐列表的導航懸停分組索引列表

SuspensionIndexBar簡介：快速實現分組懸停、右側索引導航聯動 列表。如 美團選擇城市介面，微信通訊錄介面、餓了麼點餐介面等。SuspensionIndexBar相關博文：喜歡隨手點個star 多謝在哪裡找到我：我的github：我的CSDN部落格：我的稀土掘金

【Android】快速實現仿美團選擇城市介面，微信通訊錄介面

概述 本文是這個系列的第三篇，不出意外也是終結篇。因為使用經過重構後的控制元件已經可以快速實現市面上帶 索引導航、懸停分組的列表介面了。 在前兩篇裡，我們從0開始，一步一步實現了仿微信通訊錄、餓了麼選餐介面。 （第一篇戳我 第二篇戳我） 這篇文章作為終結

Next.js+React聊天室|Next仿微信桌面端|next.js聊天例項

一、專案介紹 next-webchat 基於Next.js+React.js+Redux+Antd+RScroll+RLayer等技術構建的PC桌面端仿微信聊天專案。實現了訊息/表情傳送、圖片/視訊預覽、拖拽/貼上圖片傳送、紅包/朋友圈等功能。 二、技術實現 技術框架：next.js+react.js+

高仿微信對話列表滑動刪除效果

urn ann hang 源代碼分析 times ati boolean fault traffic 前言 用過微信的都知道。微信對話列表滑動刪除效果是非常不錯的，這個效果我們也能夠有。思路事實上非常easy，弄個ListView。然後裏面的每一個item做成一個能夠滑

HTML5+weui仿微信聊天功能、長按刪除功能

html5微信聊天 h5微信聊天界面最近由於項目需要， 就運用html5+css3+weui+jquery實現的微信聊天小案例，可發表圖像、紅包、打賞...功能， 還可以長按刪除消息。。。案例截圖如下：HTML及Js片段：<!DOCTYPE html><html lang="zh-cn"&g

H5仿微信界面教程(一)

並且 ace font 界面 badge alt access oppo show 前言 先來張圖,仿微信界面，界面如下，並不完全一模一樣，只能說有些類似，希望大家見諒。 1 用到的知識點 jQuery WeUI 是WeUI的一個jQuery實現版本，除了實現了官方插件