react-native 实现好友列表通讯录功能

最新推荐文章于 2024-05-13 09:40:51 发布
最新推荐文章于 2024-05-13 09:40:51 发布
阅读量1.2k 收藏 5
点赞数
分类专栏： react-native rn 文章标签： react native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40868849/article/details/110950514
版权

实现功能:

  1. 根据拼音,拼音首字母,汉字检索
  2. 右侧字母导航栏点击可跳转到对应字母处
  3. 字母排序
  4. 多选功能

需要修改的地方,数据源,图片资源,import处改成自己的,或者可以用我的

效果图:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

完整代码-------------


import React from 'react';
import {
    Dimensions,
    FlatList,
    SectionList,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
    SafeAreaView,
    Image,
    TextInput,
    Platform,
    StatusBar,
} from 'react-native';
import {pxToDp} from '../../../utils/stylesKits'; //像素转换工具
import {pinyin} from '../../../utils/pinyin';   //拼音  yarn add pinyin
import request from "../../../utils/request";  //后封装的请求方法,自行选择
import {Friend_LIST} from '../../../utils/pathMap'; //接口地址,自行选择

let  list=[]; //接口请求存放的数据
const selectedFieldName = 'id';
 
const isAndroid = Platform.OS === 'android';
export default class IndexListComponentExample extends React.PureComponent {    
    isLoading = false;      
    constructor(props) {
        super(props);
        this.getList()
        
        this.state = {
            searchValue: null, //搜索框里的值
        
            dataList: list,
            sections: [],       //section数组
            // letterArr: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'],      //首字母数组
            letterArr: [],      //首字母数组
            activeLetterIndex: 0,
            selectedItemSet: new Set(),
 
            // 是否开启批量选择模式
            batchSelected: false,
            refreshCount: 0,
            
        };
        
    }

    // 获取 好友列表--更改你的接口
  getList = async (isNew = false) => {
    const res = await request.privateGet(Friend_LIST);
    this.setState({ list: res.data });

    // console.log(this.state.list);
    if (isNew) {
      // 重置数据
      this.setState({ list: res.data });
    //   console.log(this.state.list);
    } else {
      this.setState({ list: [...list, ...res.data] });
    //   console.log(this.state.list);

    }
   
    this.isLoading = false;
    this.getCC();
  }
  //拼音转换
  getCC=()=>{
        // 将数据列表转化为拼音存储，以便于拼音搜索
        //-----------数据源
        this.state.list.forEach((item, index, arr) => {
            // 将Item的名称转为拼音数组
            let pinyinArr = pinyin(item.name, {style: pinyin.STYLE_NORMAL});
            item.pinyinArr = pinyinArr;
            let pinyinArrStr = '';
            // 将拼音数组转化为一个字符串，以支持拼音搜索
            for (let i = 0; i < pinyinArr.length; i++) {
                for (let j = 0; j < pinyinArr[i].length; j++) {
                    pinyinArrStr = pinyinArrStr + pinyinArr[i][j];
                }
            }
            item.pinyinArrStr = pinyinArrStr;
        });
        this.transferToSectionsData(this.state.list);
  }
 
    /**
     * 转化数据列表
     */
    transferToSectionsData = (list) => {
        //获取联系人列表
        let sections = [], letterArr = [];
        // 右侧字母栏数据处理
        list.forEach((item, index, arr) => {
            let itemTemp = pinyin(item.name.substring(0, 1), {
                style: pinyin.STYLE_FIRST_LETTER,
            })[0][0].toUpperCase();
            letterArr.push(itemTemp);
        });
        letterArr = [...new Set(letterArr)].sort();
        this.setState({letterArr: letterArr});
 
        // 分组数据处理
        letterArr.forEach((item, index, arr) => {
            sections.push({
                title: item,
                data: [],
            });
        });
 
        list.forEach((item1, index1, arr1) => {
            let listItem = item1;
            sections.forEach((item2, index2, arr2) => {
                let avatar=listItem.avatar;
                let firstName = listItem.name.substring(0, 1);
                let firstLetter = pinyin(firstName, {style: pinyin.STYLE_FIRST_LETTER})[0][0].toUpperCase();
                let pinyinStrArr = pinyin(listItem.name, {style: pinyin.STYLE_NORMAL});
                if (item2.title === firstLetter) {
                    item2.data.push({
                        avatar:avatar,
                        // firstName: firstName,
                        name: listItem.name,
                        id: listItem.id,
                    });
                }
            });
        });
        this.setState({sections: sections});
    };
 
    openBatchSelectedMode = (callback) => {
        this.setState({
            batchSelected: true,
            selectedItemSet: new Set(),
        }, () => {
            callback && callback();
        });
    };
 
    closeBatchSelectedMode = () => {
        this.setState({
            batchSelected: false,
            selectedItemSet: new Set(),
        });
    };
 
    addOrDeleteSelectedItem = (item) => {
        const {batchSelected, selectedItemSet, refreshCount} = this.state;
        if (!batchSelected) {
            return;
        }
        if (item && item[selectedFieldName]) {
            if (selectedItemSet.has(item[selectedFieldName])) {
                selectedItemSet.delete(item[selectedFieldName]);
            } else {
                selectedItemSet.add(item[selectedFieldName]);
            }
            console.log('addOrDeleteSelectedItem.selectedItemSet', selectedItemSet);
            this.setState({
                selectedItemSet: selectedItemSet,
                refreshCount: refreshCount + 1,
            }, () => {
 
            });
        }
    };
 
    /**
     * 重置选中的成员
     */
    clearSelectedItem = () => {
        const {batchSelected, selectedItemSet, refreshCount} = this.state;
        selectedItemSet.clear();
        this.setState({
            selectedItemSet: selectedItemSet,
            refreshCount: refreshCount + 1,
        }, () => {
 
        });
    };
 
 
    // 字母关联分组跳转
    _onSectionselect = (key) => {
        this.setState({
            activeLetterIndex: key,
        }, () => {
 
        });
        this.refs._sectionList.scrollToLocation({
            itemIndex: 0,
            sectionIndex: key,
            viewOffset: 20,
        });
 
    };
 
    // 分组列表的头部
    _renderSectionHeader(sectionItem) {
        const {section} = sectionItem;
        return (
            <View style={{
                height: 20,
                backgroundColor: '#e7f0f9',
                paddingHorizontal: 10,
                flexDirection: 'row',
                alignItems: 'center',
            }}>
                <Text style={{fontSize: 16}}>{section.title.toUpperCase()}</Text>
            </View>
        );
    }
 
    renderItemSelectedIcon = (item) => {
        if (!item) {
            return;
        }
        const {batchSelected, selectedItemSet} = this.state;
        if (batchSelected) {
            let isActive = selectedItemSet.has(item[selectedFieldName]);
            return (
                <Image
                    style={{
                        width: 18,
                        height: 18,
                        marginRight: 10,
                    }}
                    source={isActive
                        ? require('../../../res/xuanzhong.png')
                        : require('../../../res/weixuanzhong.png')}
                />
            );
        } else {
            return null;
        }
    };
 
    _renderItem(item, index) {
        const {batchSelected} = this.state;
        return (
            <TouchableOpacity
                style={{
                    paddingLeft: pxToDp(20),
                    paddingRight: pxToDp(30),
                    height: pxToDp(50),
                    flexDirection: 'row',
                    justifyContent: 'flex-start',
                    alignItems: 'center',
                    borderBottomWidth: 1,
                    backgroundColor:"#FFFFFF",
                    borderBottomColor: '#efefef',
                }}
                activeOpacity={.75}
                onLongPress={() => {
                    if (!batchSelected) {
                        this.openBatchSelectedMode(() => {
                            this.addOrDeleteSelectedItem(item);
                        });
                    }
                }}
                onPress={() => {
                    this.addOrDeleteSelectedItem(item);
                }}
            >
                {
                    this.renderItemSelectedIcon(item)
                }
                <View style={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    // justifyContent: 'space-between',
                    flexGrow: 1,
                }}>
                    {/* 名称图标 */}
                    <View style={{
                        // padding: 10,
                        height: pxToDp(30),
                        width: pxToDp(30),
                        justifyContent: 'center',
                        alignItems: 'center',
                        backgroundColor: '#fff',
                    }}>
                       
                            <Image style={{
                             width: pxToDp(35), height: pxToDp(35),
                             borderRadius:pxToDp(25)
                            }} source={{ uri: item.avatar }} />
                        
                    </View>
                    <View style={{
                        marginLeft: 20,
                    }}>
                        <View>
                        <View style={{flexDirection:"row",alignItems:"center"}}>
                            <Text style={{fontSize:pxToDp(12)}}>{item.name} </Text>
                            <Text style={{fontSize:pxToDp(10),left:pxToDp(8)}}>金牛座</Text>

                        </View>
                        <Text style={{fontSize:pxToDp(8),color:"#555"}}>今天天气真好啊,适合上山放羊呢</Text>
                        </View>
                    </View>
                    
                    
                </View>
            </TouchableOpacity>
        );
    }
 
    renderBatchSelectedHeader = () => {
        const {batchSelected, selectedItemSet} = this.state;
        if (!batchSelected) {
            return (
                
                <View style={{
                    paddingLeft: 10,
                    paddingRight: 10,
                    height: 50,
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    borderBottomWidth: 1,
                    backgroundColor:"#FFFFFF",
                    borderBottomColor: '#efefef',
                }}>
                    <TouchableOpacity
                        style={{
                            padding: 10,
                        }}
                    >
                    </TouchableOpacity>
                    <View style={{}}>
                    </View>
                    <TouchableOpacity
                        style={{
                            padding: 10,
                        }}
                        onPress={() => {
                            this.openBatchSelectedMode();
                        }}
                    >
                        <Text>批量选择</Text>
                    </TouchableOpacity>
                </View>
            
            );
        }
        return (
            <View style={{
                paddingLeft: 10,
                paddingRight: 10,
                height: 50,
                flexDirection: 'row',
                justifyContent: 'space-between',
                alignItems: 'center',
            }}>
                <TouchableOpacity
                    style={{
                        padding: 10,
                    }}
                    onPress={() => {
                        this.closeBatchSelectedMode();
                    }}
                >
                    <Text>取消</Text>
                </TouchableOpacity>
                <View style={{}}>
                    <Text>已选择{selectedItemSet.size}条记录</Text>
                </View>
                <TouchableOpacity
                    style={{
                        padding: 10,
                    }}
                    onPress={() => {
                        this.closeBatchSelectedMode();
                    }}
                >
                    <Text>确定</Text>
                </TouchableOpacity>
            </View>
        );
    };
 
 
    render = () => {
        const {letterArr, sections, activeLetterIndex, batchSelected} = this.state;
        //偏移量 = （设备高度 - 字母索引高度 - 底部导航栏 - 顶部标题栏 - 24）/ 2
        let top_offset = (Dimensions.get('window').height - letterArr.length * 16 - 52 - 44 - 24) / 2;
        if (isAndroid) {
            top_offset = top_offset + StatusBar.currentHeight + 45;
        }
        return (
            <SafeAreaView style={{
                flex: 1,
            }}>
                {
                    this.renderSearchBar()
                }
                {/* 新朋友 */}
                <View style={{
                    backgroundColor:"#FFFFFF",
                    alignContent:"center",
                    flexDirection:"row",
                    borderBottomWidth: 1,
                    borderBottomColor: '#efefef'
                    }}>
                    <TouchableOpacity style={{
                        height:pxToDp(50),
                        width:"100%",
                        flexDirection:"row",
                        left:pxToDp(20),
                        alignItems:"center"
                    }}>                    
                        <View style={{
                        width: pxToDp(30), height: pxToDp(30), 
                        backgroundColor: "#1adbde", alignItems: 'center', justifyContent: 'center',borderRadius:5
                        }}>
                        <Image source={require('../../../res/xinpengyou.png')}
                        style={{width: pxToDp(30), height: pxToDp(30),color:"black"}}/>
                        {/* <IconFont style={{ color: "#fff", fontSize: pxToDp(24) }} name="iconxihuan-o" /> */}
                        </View>
                        <Text style={{ color: "#444",fontSize:pxToDp(20) ,left:pxToDp(18)}}>新朋友</Text>
                    
                    </TouchableOpacity>
                    
                </View>
                {/* 其他 */}
                <View style={{
                    backgroundColor:"#FFFFFF",
                    alignContent:"center",
                    flexDirection:"row",
                    borderBottomWidth: 1,
                    borderBottomColor: '#efefef'
                    }}>
                    <TouchableOpacity style={{
                        height:pxToDp(50),
                        width:"100%",
                        flexDirection:"row",
                        left:pxToDp(20),
                        alignItems:"center"
                    }}>                    
                        <View style={{
                        width: pxToDp(30), height: pxToDp(30), 
                        backgroundColor: "#1adbde", alignItems: 'center', justifyContent: 'center',borderRadius:5
                        }}>
                        <Image source={require('../../../res/xinpengyou.png')}
                        style={{width: pxToDp(30), height: pxToDp(30),color:"black"}}/>
                        {/* <IconFont style={{ color: "#fff", fontSize: pxToDp(24) }} name="iconxihuan-o" /> */}
                        </View>
                        <Text style={{ color: "#444",fontSize:pxToDp(20) ,left:pxToDp(18)}}>其他</Text>
                    
                    </TouchableOpacity>
                    
                </View>
                {
                    this.renderBatchSelectedHeader()
                }
                <SectionList
                    ref="_sectionList"
                    renderItem={({item, index}) => this._renderItem(item, index)}
                    renderSectionHeader={this._renderSectionHeader.bind(this)}
                    sections={sections}
                    keyExtractor={(item, index) => item + index}
                    ItemSeparatorComponent={() => <View/>}
                />
 
                {/*右侧字母栏*/}
                <View style={{position: 'absolute', width: 26, right: 0, top: top_offset}}>
                    <FlatList
                        data={letterArr}
                        keyExtractor={(item, index) => index.toString()}
                        renderItem={({item, index}) => {
                            let isActive = index === activeLetterIndex;
                            // let textStyle = isActive ? styles.activeIndicatorText : styles.inactiveIndicatorText;
                            // let containerStyle = isActive ? styles.activeIndicatorContainer : styles.inactiveIndicatorContainer;
                            let textStyle = styles.inactiveIndicatorText;
                            let containerStyle = styles.inactiveIndicatorContainer;
                            return (
                                <TouchableOpacity
                                    style={[
                                        {
                                            marginVertical: 2,
                                            height: 16,
                                            width: 16,
                                            borderRadius: 8,
                                            flexDirection: 'row',
                                            justifyContent: 'center',
                                            alignItems: 'center',
                                        },
                                        containerStyle,
                                    ]}
                                    onPress={() => {
                                        this._onSectionselect(index);
                                    }}
                                >
                                    <Text style={[{
                                        fontSize: 12,
                                    }, textStyle]}>
                                        {item.toUpperCase()}
                                    </Text>
                                </TouchableOpacity>
                            );
                        }}
                    />
                </View>
 
            </SafeAreaView>
        );
    };
 
    setSearchValue = (searchValue, callback) => {
        this.setState({
            searchValue: searchValue,
        }, () => {
            callback && callback();
        });
    };
 
    search = () => {
        // alert('搜索');
        const {list, searchValue} = this.state;
        console.log(searchValue);

        if (searchValue && searchValue.trim()) {
            let searchValueTemp = searchValue.toLocaleLowerCase();
            const resultList = [];
            list.forEach((item, index, arr) => {
                if (item.name) {
                    if (item.name.toLocaleLowerCase().indexOf(searchValueTemp) >= 0
                        || this.pinyinSingleLetterIndexSearch(searchValueTemp, item.pinyinArr) >= 0
                        || item.pinyinArrStr.toLocaleLowerCase().indexOf(searchValueTemp) >= 0) {
                        resultList.push(item);
                    }
                }
            });
            console.log('search.resultList:', resultList);
            this.transferToSectionsData(resultList);
        } else {
            this.transferToSectionsData(list);
        }
    };
 
    /**
     * 在拼音数组中搜索单个拼音，如果匹配，则返回等于大于0的值，否则返回-1
     * @param keyword
     * @param pinyinArr
     * @returns {number}
     */
    pinyinSingleLetterIndexSearch = (keyword, pinyinArr) => {
        let result = -1;
        if (keyword && pinyinArr) {
            for (let i = 0; i < pinyinArr.length; i++) {
                for (let j = 0; j < pinyinArr[i].length; j++) {
                    let singleLetterIndex = pinyinArr[i][j].toLocaleLowerCase().indexOf(keyword);
                    if (singleLetterIndex >= 0) {
                        return singleLetterIndex;
                    }
                }
            }
        }
        return result;
    };
 
    renderSearchBar = () => {
        const {searchValue} = this.state;
        return (
            <View style={{
                flexDirection: 'row',
                alignItems: 'center',
                paddingTop: 10,
                paddingBottom: 10,
                backgroundColor: '#fff',
                borderBottomWidth: 1,
                borderBottomColor: '#efefef',
            }}>
                <TouchableOpacity
                    style={{
                        marginTop:8,
                        paddingLeft: 15,
                        paddingRight: 15,
                    }}
                    onPress={() => {
 
                    }}
                >
                    {/* 搜索 */}
                    <Image style={{width: 20, height: 20}}
                    source={require('../../../res/fanhui.png')}/>
                </TouchableOpacity>
                <View
                    style={{
                        flex: 1,
                    }}
                >
                    <View style={{
                        marginTop:10,
                        height: 30,
                        backgroundColor: '#F0F0F0',
                        borderRadius: 30,
                        paddingLeft: 10,
                        flexDirection: 'row',
                        alignItems: 'center',
                        justifyContent: 'center',
                    }}>

                        <Image source={require('../../../res/sousuo.png')}
                               style={{width: 15, height: 15}}/>
                        <TextInput
                            placeholder="输入查询内容..."
                            maxLength={100}
                            style={{
                                flex: 1,
                                marginLeft: 5,
                                marginRight: 5,
                                paddingTop: 5,
                                paddingBottom: 5,
                                paddingRight: 5,
                                // backgroundColor: 'pink',
                            }}
                            autoFocus={false}
                            value={searchValue}
                            onChangeText={(text) => {
                                this.setSearchValue(text, () => {
                                    this.search();
                                });
                            }}
                            onSubmitEditing={() => {
 
                            }}
                        />
                        {
                            searchValue
                                ? <TouchableOpacity
                                    style={{
                                        marginRight: 10,
                                    }}
                                    onPress={() => {
                                        this.setSearchValue(null, () => {
                                            this.search();
                                        });
                                    }}
                                >
                                    <Image source={require('../../../res/1.png')}
                                           style={{
                                               width: 17,
                                               height: 17,
                                           }}
                                    />
                                </TouchableOpacity>
                                : null
                        }
                    </View>
 
                </View>
                <TouchableOpacity
                    style={{
                        marginTop:10,
                        paddingLeft: 10,
                        paddingRight: 10,
                        justifyContent: 'center',
                        alignItems: 'center',
                    }}
                    onPress={() => {
                        this.search();
                    }}
                >
                    <Text style={{
                        color: '#2988FF',
                        fontSize: 16,
                    }}>
                        搜索
                    </Text>
                </TouchableOpacity>
            </View>
        );
    };
 
}
 
const styles = StyleSheet.create({
    taskNodeTitleText: {
        color: '#333333',
        fontWeight: 'bold',
        fontSize: 16,
    },
    inactiveIndicatorContainer: {},
    activeIndicatorContainer: {
        backgroundColor: '#2988FF',
    },
    inactiveIndicatorText: {
        color: '#666666',
    },
    activeIndicatorText: {
        color: '#fff',
    },
});```
冰封大大
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React Native 仿微信通讯录右侧字母快捷操作区
孟凡涛 的博客
11-10 5366
其实也不能说仿微信，大部分通讯录都一样，先来看两张效果图第一张是微信、第二张是我写的简单介绍一下功能点1、好友排序 2、点击右侧快捷操作区，相应跳转到所属通讯录区域 3、ScrollView 在滑动过程中自动匹配右侧字母分类，同时作出UI更新详细讲讲好友信息数据结构let typeList = [ { nickname: '曾泰', picture: '', letter: 'Z' },
react native 通讯录
钬码狼酷的博客
08-05 2066
react native contacts 1. flatList scrollToIndex 函数实现跳转到指定字母开头的联系人 2. 数据处理，将接口数据处理成组件需要的数据 效果： /** * Created by hmlk on 2018/7/19 14:15 */ import React, {Component} from 'react' import { Saf...
React联系人列表
02-21
该项目是通过。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 最小化构建，文件名包含哈希。 您的应用已准备好进行部署！ 有关更多信息，请参见有关的部分。 npm run eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从项目中删除单个构建依赖项。 而是将所有配置文件和传递依赖项（Webpack，Babel，ESLint等）直接复制到您的项目中，以
仿微信或iOS 通讯录 列表，右侧字母联动加载功能
半身风雪
07-08 1345
话不多说，直接上代码 /** 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
推荐开源项目：React Native Contacts - 管理手机通讯录的完美解决方案
最新发布
gitblog_00027的博客
05-13 296
推荐开源项目：React Native Contacts - 管理手机通讯录的完美解决方案 项目地址:https://gitcode.com/morenoh149/react-native-contacts 项目介绍 React Native Contacts 是一款强大的库，让你能够轻松地在React Native应用中集成和管理用户的联系人信息。无论是在iOS还是Android平台上，这个库都...
关于React Native 仿微信界面设计
cyadyx的博客
07-31 581
系列文章目录 了解一个框架最好的方式是自己动手，算是学习提升的一种快速方式，这里简单简述一些过程。 提示：由于使用的库比较多，前面的文章《关于React native Demo项目的总结》也有写些库的使用，这样不再说明。 文章目录系列文章目录一、使用库二、使用步骤1.设置导航路由2.加载底部菜单3. 设置mobx 状态存储4.代码结构5.说明总结 一、使用库 "dependencies": { "@babel/plugin-proposal-decorators": "^7.14.5",
RN仿微信通讯录列表
大灰狼的小绵羊哥哥的博客
09-16 1460
源码在此 先看一下预览图效果： pic1.jpg 首先通过构造器初始化state constructor(props) { super(props); this.state = { //Global这里是全局变量 loadingState: Global.loading, con...
ReactNative实现仿微信或者通讯录快速索引功能
GL_MINE_CSDN的博客
03-10 8847
概述 当我们在RN业务需求中实现通讯录快速索引时,应该如何考虑去实现. 如何下图所示: 需求分析 实现列表 数据模型 data= [ {title:"A",head:true}, {city:"安阳"}, {city:"安庆"}, {city:"鞍山"}, {title:"B",head:true}, {city:"蚌埠"}, {city:"包头"}...
React-仿微信通讯录控件
ccx
12-17 2174
起因:产品给了一个需求,要求写一个跟微信朋友圈一样,取首字母产生的通讯录标签页, 因为很多人要求源码给上 现在贴上源码源码地址 写了一遍,发现意外的好写 最终效果 数据采用了随机字符串的方法,并且使用数组方法排序, // 去除数字key let regExp = new RegExp(/^[0-9]$/); let data = []...
react根据中文获取拼音_react-native按照汉字首字母排序
weixin_29696799的博客
01-13 1052
问题描述：JS中有一个String的内置函数：String.prototype.localeCompare()，返回一个数字来指示一个参考字符串是否在排序顺序前面或之后或与给定字符串相同。1 a.nickName.localeCompare(b.nickName, 'zh-Hans-CN', {sensitivity: 'accent'})在react-native环境下，此函数的返回值在IOS上...
SectionList与mobx不兼容的解决方案：Attempt to read an array index (4) that is out of bounds (4).
qq_33539839的博客
10-20 1798
前几天在使用SectionList与mobx合用的时候，遇到了这个warning警告："Attempt to read an array index (4) that is out of bounds (4). Please check length first. Out of bound indices will not be tracked by MobX" 项目使用的版本号如下： "mobx": "^4.3.1", "mobx-react": "^5.1.0", "react": "16.9.0",
react-contact-list:React联系人列表应用程序
04-30
React联系人列表 演示版 将React App部署到Heroku 高阶组件 简单来说，我们可以说高阶组件是一个接受一个组件作为参数并返回另一个包裹它的组件的函数。 该截屏视频显示了如何创建高阶组件，并举例说明了它如何有用。 截屏视频： : LTunyI2Oyzw 大纲 什么是高阶成分 渲染劫机 用作装饰器[未使用] 使用Curried函数进行配置 操纵道具 但是，我不使用此应用程序上的Babel装饰器，如果要使用，请参阅 生成和运行说明 要在此目录中生成并运行代码，请确保已安装 安装 npm install 启动应用程序 npm start
react-native使用SectionList做通讯录列表，分组跳转
halo1416的博客
08-28 6113
前言：最近开发的app中有一个类似手机通讯录的组件，准备自己用 SectionList 做； 注意：本文使用的RN版本为0.55版本，从官方文档上看SectionList是从0.43版本才有的。如果需要使用SectionList，请注意RN的版本问题。 首先，看下最后的效果图： 其次，接口请求的数据结构（mock模拟）： 然后，看一下官方对SectionList数据格式的要求：ht...
React Native中的联系人列表屏幕
weixin_26750481的博客
09-09 182
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入门实战（一）联系人列表Contact（附完整代码）
安之ccy的博客
07-08 2569
React入门实战项目——联系人列表Contact，通过该实战学习以下知识点： 1. 列表渲染 2. props：父向子传值、函数 3. 容器组件的使用与接收props 4. 事件使用
React-native实现联系人列表分组组件
dly15873944157的博客
10-09 351
React-native实现联系人列表分组组件（支持拼音搜索） 参考资料： React Native使用SectionList打造城市选择列表，包含分组的跳转：https://blog.csdn.net/sinat_17775997/article/details/71424324?utm_medium=distribute.pc_relevant.none-task-blog-OPENSEARCH-5&depth_1-utm_source=distribute.pc_relevant.none-t
Taro react 160 行实现@别人功能
Web_boom的博客
06-14 539
这个功能最让人头疼的地方在于小程序文本域的输入回调提供的信息过少，没办法直接判断输入位置，在 Taro 文档中提到 TextArea 的 onInput 事件会返回文本内容 、光标位置 、按键类型 三个值。但是在我的实际测试中，只拿到了 。这是什么人间疾苦。所以说，我们需要先搞一个算法来找到当前新输入了什么以及在哪输入的。之后的问题就好办了，如果输入的是 @，就拉起动作面板，选择某个人后触发回调，在正文里插入这个人的名字，然后把对应的信息存到另一个 state 方便后续操作就可以了。这里先贴出来完整代码，
react 电话本列表、触底加载
m0_71955188的博客
09-11 119
【代码】react 电话本列表、触底加载。
react-native link react-native-pdf zsh: command not found: react-native
12-29
要解决"zsh: command not found: react-native"的问题，你需要确保已经正确安装了react-native-cli并且已经将其添加到了系统的环境变量中。 以下是在Windows和Mac上安装和配置react-native-cli的步骤： Windows： 1. 打开命令提示符或PowerShell。 2. 运行以下命令来安装react-native-cli： ``` npm install -g react-native-cli ``` 3. 等待安装完成后，你应该能够在命令提示符或PowerShell中使用react-native命令。 Mac： 1. 打开终端。 2. 运行以下命令来安装react-native-cli： ``` sudo npm install -g react-native-cli ``` 输入你的密码以确认安装。 3. 安装完成后，运行以下命令来查找react-native-cli的安装路径： ``` which react-native ``` 记下这个路径，我们称之为路径A。 4. 打开你的bash配置文件（例如：~/.bash_profile、~/.bashrc、~/.zshrc等）。 5. 在文件末尾添加以下行： ``` export PATH="$PATH:路径A" ``` 将路径A替换为你在步骤3中记录的路径。 6. 保存并关闭文件。 7. 在终端中运行以下命令来使配置生效： ``` source ~/.bash_profile ``` 如果你使用的是其他bash配置文件，请相应地修改命令。 完成上述步骤后，你应该能够在终端中使用react-native命令了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值