React Native 仿微信通讯录右侧字母快捷操作区

最新推荐文章于 2021-07-31 14:19:15 发布
最新推荐文章于 2021-07-31 14:19:15 发布
阅读量1.9k 收藏
点赞数
分类专栏： 【React-Native2点滴知识 】

其实也不能说仿微信，大部分通讯录都一样，先来看两张效果图

第一张是微信、第二张是我写的

简单介绍一下功能点

1、好友排序 
2、点击右侧快捷操作区，相应跳转到所属通讯录区域 
3、ScrollView 在滑动过程中自动匹配右侧字母分类，同时作出UI更新

详细讲讲

好友信息数据结构

let typeList = [
  { nickname: '曾泰', picture: '', letter: 'Z' },
  { nickname: '狄仁杰', picture: '', letter: 'D' },
  { nickname: '李元芳', picture: '', letter: 'L' },
  ......
]
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

右侧操作栏数据结构

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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

1、好友排序

这个是基本操作，没什么可说的，为了功能的完整性，纯当做记录吧

/** 对列表信息进行排序 放在saga中进行处理 */
sortFriend () {
  this.friendListSource = typeList.sort((a, b) => { return a.letter.localeCompare(b.letter) })
}
 
 
  • 1
  • 2
  • 3
  • 4

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 })
    })
  })
}
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

接下来，我们就开始定量计算了

/** 右侧通讯录 */
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 })
}

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

界面操作呢？？？？

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>
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

3、ScrollView 在滑动过程中自动匹配右侧字母分类，同时作出UI更新

<ScrollView
 ref='scroll'
 /** onScroll 回调频率 */
 scrollEventThrottle={2}
 /* 滑动监听 */
 onScroll={(e) => this.isScrollOn(e)}
 >
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

其中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 })
         }
       }
     })
   }
 }
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

由于我们的精度比较高，所以事件调用的频率也比较高，所以我们对处理状态和上一次的处理结果进行了保存，下一次调用时会进行比对，如果条件一致，就不再处理，这样处理频率就会相当可控，效果还是比较不错的，分块讲解可能不是很直观，我就把全部代码贴出来，大家可以从全局参考一下，欢迎提出建议


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>
    )
  }
}

转载http://blog.csdn.net/qq_28978893/article/details/78503106

barnett_y
关注
专栏目录
react实现通讯录效果
weixin_39168678的博客
06-11 3594
业务描述：通过react实现一个类似通讯录的页面，并可以通过点击侧边首字母跳转到对应的用户 大致效果 步骤 1，先造一批假数据 const users = [ [ {id: 0, name:&quot;a&quot;,imgUrl:white}, {id: 1, name:'ahat',imgUrl:sy...
reactnative触摸事件机制详解及高仿微信通讯录功能
08-10
react native 触摸事件机制详解，及高仿微信通讯录功能。
React-仿微信通讯录控件
ccx
12-17 2203
起因:产品给了一个需求,要求写一个跟微信朋友圈一样,取首字母产生的通讯录标签页, 因为很多人要求源码给上 现在贴上源码源码地址 写了一遍,发现意外的好写 最终效果 数据采用了随机字符串的方法,并且使用数组方法排序, // 去除数字key let regExp = new RegExp(/^[0-9]$/); let data = []...
ReactNative实现仿微信或者通讯录快速索引功能
GL_MINE_CSDN的博客
03-10 9006
概述 当我们在RN业务需求中实现通讯录快速索引时,应该如何考虑去实现. 如何下图所示: 需求分析 实现列表 数据模型 data= [ {title:"A",head:true}, {city:"安阳"}, {city:"安庆"}, {city:"鞍山"}, {title:"B",head:true}, {city:"蚌埠"}, {city:"包头"}...
高仿微信通讯录
11-27
高仿微信通讯录界面，加入快速查找功能，可以快速查找人物，添加字母导航功能，选择字母导航会有提示
Android自定义View实现通讯录字母索引（仿微信通讯录）
01-05
一、效果：我们看到很多软件的通讯录在右侧都有一个字母索引功能，像微信，小米通讯录，QQ,还有美团选择地区等等。这里我截了一张美团选择城市的图片来看看； 我们今天就来实现图片中右侧模块的索引功能，包括触摸...
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
01-21
基于react+react-native+react-navigation+react-redux+react-native-swiper+rnPop等技术开发的仿微信原生App界面聊天室——RN_ChatRoom，实现了原生app启动页、AsyncStorage本地存储登录拦截、集成rnPop模态框功能...
高仿微信通讯录列表
11-10
在IT行业中，构建类似微信通讯录的滑动字母导航功能是一项常见的需求，它能提供便捷的用户界面，让用户快速找到联系人。以下是对这个主题的详细解析： 首先，"高仿微信通讯录列表"指的是创建一个与微信应用中通讯录...
关于React Native 仿微信界面设计
cyadyx的博客
07-31 638
系列文章目录 了解一个框架最好的方式是自己动手，算是学习提升的一种快速方式，这里简单简述一些过程。 提示：由于使用的库比较多，前面的文章《关于React native Demo项目的总结》也有写些库的使用，这样不再说明。 文章目录系列文章目录一、使用库二、使用步骤1.设置导航路由2.加载底部菜单3. 设置mobx 状态存储4.代码结构5.说明总结 一、使用库 "dependencies": { "@babel/plugin-proposal-decorators": "^7.14.5",
react-native列表分组，侧边字母快速定位。
weixin_36965072的博客
01-07 3153
这个是仿照着写的大概的一个功能实现。颜色样式等都没有做处理。 逻辑是：进入到这个页面的时候把当前位置传到这个页面上来，展示一个列表和一列字母。选择新的城市后替换所在城市。 &amp;lt;View style={styles.view}&amp;gt; &amp;lt;View style={styles.view2}&amp;gt; &amp;lt;Header...
仿微信或iOS 通讯录 列表，右侧字母联动加载功能
半身风雪
07-08 1402
话不多说，直接上代码 /** Sample React Native App https://github.com/facebook/react-native @format @flow */ import React, {Component} from ‘react’; import { Platform, StyleSheet, Text, View, TouchableOpacity, Alert, SafeAreaView, SectionList, TouchableWithoutFeedb
RN仿微信通讯录列表
大灰狼的小绵羊哥哥的博客
09-16 1487
源码在此 先看一下预览图效果： pic1.jpg 首先通过构造器初始化state constructor(props) { super(props); this.state = { //Global这里是全局变量 loadingState: Global.loading, con...
react-native 实现好友列表通讯录功能
qq_40868849的博客
12-10 1315
实现功能: 根据拼音,拼音首字母,汉字检索 右侧字母导航栏点击可跳转到对应字母处 字母排序 效果图: import React from 'react'; import { Dimensions, FlatList, SectionList, StyleSheet, Text, TouchableOpacity, View, SafeAreaView, Image, TextInput, Platform,
ReactNative 滑动字母选择城市 以及搜索功能
六道对穿肠的学习之旅
10-09 5017
先上效果图遇到的问题 右侧字母选择器 高度问题, 右侧字母选择器 如何使用手势检测panresponse 右侧字母选择器 计算高度如何判断是触摸到那个字母上的(思考 如果是==native应用是如何做的==…刚看过 native应用的城市列表也是通过计算每个字母的高度来检测的)动态创建的控件 右边滑动的原理: 通过onlayout计算每个字母高度 ,然后加入数组 , 手指触摸字母列表时 知道 触摸的
React Native中的联系人列表屏幕
weixin_26750481的博客
09-09 204
We will be building a simple contacts list screen in React Native. This is how the final version of the app will look like. 我们将在React Native中构建一个简单的联系人列表屏幕。 这就是应用程序最终版本的样子。 Couple of things to notice...
react native 通讯录
钬码狼酷的博客
08-05 2093
react native contacts 1. flatList scrollToIndex 函数实现跳转到指定字母开头的联系人 2. 数据处理，将接口数据处理成组件需要的数据 效果： /** * Created by hmlk on 2018/7/19 14:15 */ import React, {Component} from 'react' import { Saf...
react-native使用SectionList做通讯录列表，分组跳转
halo1416的博客
08-28 6219
前言：最近开发的app中有一个类似手机通讯录的组件，准备自己用 SectionList 做； 注意：本文使用的RN版本为0.55版本，从官方文档上看SectionList是从0.43版本才有的。如果需要使用SectionList，请注意RN的版本问题。 首先，看下最后的效果图： 其次，接口请求的数据结构（mock模拟）： 然后，看一下官方对SectionList数据格式的要求：ht...
React Native开发的通讯录应用
yeyuehunluhongyu的博客
07-21 1319
一、项目介绍 基于React-Native & Node通讯录App （1）主要完成的功能有： 基于文件系统的Node.js服务端;通讯录功能（分类页 ＋ 列表页 ＋ 拨号邮箱邮件）公告功能（列表页 ＋ 详情页）通讯录和内容管理功能webview内嵌实例 效果如下图所示：       （2）安装启动程序 (1)首先进入address_book目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值