[RN] 全国城市列表选择 (包含定位城市、热门城市、全国城市)

全国城市列表选择 (包含定位城市、热门城市、全国城市)

用ScrollView 实现，解决 SectionList 实现的卡顿问题

实现效果如图：

代码实现如图：

主逻辑文件 cityList.js

'use strict';
import React, {Component} from "react"
import {Dimensions, ScrollView, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import cityDatas from "./cityIndex";

const {width, height} = Dimensions.get('window');
// 适配性函数
const UIWIDTH = ;

let hotCitys = [];
let defaultHotCityArray = [
    {cityCode: "", cityName: "上海市"},
    {cityCode: "", cityName: "深圳市"},
    {cityCode: "", cityName: "北京市"},
    {cityCode: "", cityName: "广州市"},
];

const sectionWidth = ;
const statusHeight = ;
const sectionTopBottomHeight = ;
const sectionItemHeight = (height - sectionTopBottomHeight *  - statusHeight) / cityDatas.length;
const ROW_HEIGHT = ;

let totalHeight = [];
let letters = [];

export function rx(UIPX) {
    return Math.round(UIPX * width / UIWIDTH);
}

export default class cityList extends Component {
    constructor(props) {
        super(props);
        totalHeight = this._gotTotalHeightArray();
        letters = this._gotLettersArray();
    }

    state = {
        currentCity: "正在定位...",
        isLocation: false,
        sectionListDatas: cityDatas,
        letterWords: 'A'
    };

    // 获取每个字母区域的高度
    _gotTotalHeightArray() {
        let totalArray = []
        for (let i = ; i < cityDatas.length; i++) {
            let eachHeight = ROW_HEIGHT * (cityDatas[i].data.length + );
            totalArray.push(eachHeight);
        }
        return totalArray
    }

    // 获取字母列表头
    _gotLettersArray() {
        let LettersArray = []
        for (let i = ; i < cityDatas.length; i++) {
            let element = cityDatas[i];
            LettersArray.push(element.title)
        }
        return LettersArray
    }

    componentWillMount() {
        this.gotCurrentLocation();
        this.requestHotCityList();
    }

    async gotCurrentLocation() {
        this.setState({
            currentCity: "北京",
            isLocation: true
        })
    }

    requestHotCityList() {
        hotCitys = defaultHotCityArray
    }

    currentCityAction(name) {

    }

    // 点击右侧字母滑动到相应位置
    scrollToList(item, index) {
        let position = ;
        for (let i = ; i < index; i++) {
            position += totalHeight[i]
        }
        this.refs.ScrollView.scrollTo({y: position})
    }

    /*右侧索引*/
    _renderSideSectionView() {
        const sectionItem = cityDatas.map((item, index) => {
            return (
                <Text onPress={() => this.scrollToList(item, index)} key={index} style={styles.rightSideText}>
                    {item.sortLetters}
                </Text>
            )
        });

        return (
            <View style={styles.rightSlideArea} ref="sectionItemView">
                {sectionItem}
            </View>
        );
    }

    // 渲染城市列表
    _renderCityList() {
        let lists = [];
        for (let i = ; i < cityDatas.length; i++) {
            let sections = cityDatas[i];
            let header =
                <View key={sections.title} style={styles.cityLetterBox}>
                    <Text style={styles.cityLetterText}>{sections.sortLetters}</Text>
                </View>;
            lists.push(header);

            for (let j = ; j < sections.data.length; j++) {
                let element = sections.data[j];
                let cityCell =
                    <TouchableOpacity key={element.name + j} onPress={() => {
                        this.selectCity(element)
                    }}>
                        <View style={styles.cityTextBox}>
                            <Text style={styles.cityTextStyle}>{element.name}</Text>
                        </View>
                    </TouchableOpacity>;

                lists.push(cityCell);
            }
        }
        return lists;
    }

    selectCity(cityItem) {
        // alert(cityItem.cityCode);
        console.log(cityItem)
    }

    renderHotCityArray(hotCityArray) {
        let eleArray = [];

        let subArray = hotCityArray.slice(, );
        for (let index = ; index < subArray.length; index++) {
            const element = subArray[index];
            const ele =
                <TouchableOpacity key={element.cityCode} onPress={() => {
                }}>
                    <View style={[styles.textView, {marginTop: }]}>
                        <Text style={{color: "#333333", fontSize: ,}}>{element.cityName}</Text>
                    </View>
                </TouchableOpacity>;
            eleArray.push(ele);

        }
        return eleArray;
    }

    render() {
        return (

            <View style={{flex: }}>
                <View style={{backgroundColor: "#FFFFFF",}} ref='topViews'>
                    <Text style={styles.titleText}>当前定位城市</Text>
                    <View style={styles.currentView}>
                        <TouchableOpacity onPress={() => {
                            this.currentCityAction(this.state.currentCity)
                        }}
                                          style={{width: ,}}>
                            <View style={[styles.textView, {marginLeft: , width: ,}]}>
                                <Text style={{color: "#C49225", fontSize: ,}}>{this.state.currentCity}</Text>
                            </View>
                        </TouchableOpacity>
                    </View>

                    <Text style={styles.titleText}>热门城市</Text>
                    <View style={styles.hotView}>
                        {this.renderHotCityArray(hotCitys)}
                    </View>

                </View>

                <ScrollView style={{backgroundColor: '#FFFFFF',}} ref="ScrollView">
                    {this._renderCityList()}
                </ScrollView>

                {this._renderSideSectionView()}
            </View>

        )
    }
}
const styles = StyleSheet.create({
    scrollView: {
        backgroundColor: "#ECEBED"
    },
    titleText: {
        marginLeft: ,
        marginTop: ,
        color: "#999999",
        fontSize: ,
    },
    currentView: {
        marginTop: ,
        paddingBottom:
    },
    textView: {
        minWidth: ,
        height: ,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#FFF",
        borderRadius: ,
        paddingLeft: ,
        paddingRight: ,
        marginRight: ,
    },
    hotView: {
        marginTop: ,
        flexDirection: "row",
        flexWrap: "wrap",
        justifyContent: "space-between",
        marginLeft: ,
        marginRight: ,
        paddingBottom: ,
        marginBottom: ,
    },

    rightSlideArea: {
        position: 'absolute',
        width: sectionWidth,
        height: height - sectionTopBottomHeight * , right: ,
        top: ,
        marginTop: sectionTopBottomHeight,
        marginBottom: sectionTopBottomHeight,
    },
    rightSideText: {
        textAlign: 'center',
        alignItems: 'center',
        height: sectionItemHeight,
        lineHeight: sectionItemHeight,
        color: '#C49225'
    },
    cityLetterBox: {
        height: ROW_HEIGHT,
        backgroundColor: '#F4F4F4',
        justifyContent: 'center',
    },
    cityLetterText: {
        color: "#999",
        fontSize: ,
        marginLeft: ,
    },
    cityTextBox: {
        height: ROW_HEIGHT,
        justifyContent: 'center',
        backgroundColor: '#FFFFFF',
        marginLeft: ,
    },
    cityTextStyle: {
        color: '#333333',
        fontSize: ,
    },

});

数据文件：

cityIndex.js

export default [{"sortLetters":"A","data":[{"id":"","name":"阿拉善盟"},{"id":"","name":"鞍山"},{"id":"","name":"安庆"},{"id":"","name":"安阳"},{"id":"","name":"阿坝藏族羌族自治州"},{"id":"","name":"安顺"},{"id":"","name":"阿里地区"},{"id":"","name":"安康"},{"id":"","name":"阿拉尔"},{"id":"","name":"阿克苏地区"},{"id":"","name":"阿勒泰地区"}]},{"sortLetters":"B","data":[{"id":"","name":"北京"},{"id":"","name":"保定"},{"id":"","name":"包头"},{"id":"","name":"巴彦淖尔"},{"id":"","name":"本溪"},{"id":"","name":"白山"},{"id":"","name":"白城"},{"id":"","name":"蚌埠"},{"id":"","name":"亳州"},{"id":"","name":"滨州"},{"id":"","name":"北海"},{"id":"","name":"百色"},{"id":"","name":"白沙黎族自治县"},{"id":"","name":"保亭黎族苗族自治县"},{"id":"","name":"巴中"},{"id":"","name":"毕节"},{"id":"","name":"保山"},{"id":"","name":"宝鸡"},{"id":"","name":"白银"},{"id":"","name":"北屯"},{"id":"","name":"博尔塔拉蒙古自治州"},{"id":"","name":"巴音郭楞蒙古自治州"}]},{"sortLetters":"C","data":[{"id":"","name":"承德"},{"id":"","name":"沧州"},{"id":"","name":"长治"},{"id":"","name":"赤峰"},{"id":"","name":"长春"},{"id":"","name":"常州"},{"id":"","name":"滁州"},{"id":"","name":"池州"},{"id":"","name":"长沙"},{"id":"","name":"常德"},{"id":"","name":"郴州"},{"id":"","name":"潮州"},{"id":"","name":"崇左"},{"id":"","name":"昌江黎族自治县"},{"id":"","name":"澄迈县"},{"id":"","name":"成都"},{"id":"","name":"楚雄彝族自治州"},{"id":"","name":"昌都"},{"id":"","name":"昌吉回族自治州"}]},{"sortLetters":"D","data":[{"id":"","name":"大同"},{"id":"","name":"大连"},{"id":"","name":"丹东"},{"id":"","name":"大庆"},{"id":"","name":"大兴安岭地区"},{"id":"","name":"东营"},{"id":"","name":"德州"},{"id":"","name":"东莞"},{"id":"","name":"东沙群岛"},{"id":"","name":"儋州"},{"id":"","name":"定安县"},{"id":"","name":"东方"},{"id":"","name":"德阳"},{"id":"","name":"达州"},{"id":"","name":"大理白族自治州"},{"id":"","name":"德宏傣族景颇族自治州"},{"id":"","name":"迪庆藏族自治州"},{"id":"","name":"定西"}]},{"sortLetters":"E","data":[{"id":"","name":"鄂尔多斯"},{"id":"","name":"鄂州"},{"id":"","name":"恩施土家族苗族自治州"}]},{"sortLetters":"F","data":[{"id":"","name":"抚顺"},{"id":"","name":"阜新"},{"id":"","name":"阜阳"},{"id":"","name":"福州"},{"id":"","name":"莆田"},{"id":"","name":"抚州"},{"id":"","name":"佛山"},{"id":"","name":"防城港"}]},{"sortLetters":"G","data":[{"id":"","name":"赣州"},{"id":"","name":"广州"},{"id":"","name":"桂林"},{"id":"","name":"贵港"},{"id":"","name":"广元"},{"id":"","name":"广安"},{"id":"","name":"甘孜藏族自治州"},{"id":"","name":"贵阳"},{"id":"","name":"甘南藏族自治州"},{"id":"","name":"果洛藏族自治州"},{"id":"","name":"固原"}]},{"sortLetters":"H","data":[{"id":"","name":"邯郸"},{"id":"","name":"衡水"},{"id":"","name":"呼和浩特"},{"id":"","name":"呼伦贝尔"},{"id":"","name":"葫芦岛"},{"id":"","name":"哈尔滨"},{"id":"","name":"鹤岗"},{"id":"","name":"黑河"},{"id":"","name":"淮安"},{"id":"","name":"杭州"},{"id":"","name":"湖州"},{"id":"","name":"合肥"},{"id":"","name":"淮南"},{"id":"","name":"淮北"},{"id":"","name":"黄山"},{"id":"","name":"菏泽"},{"id":"","name":"鹤壁"},{"id":"","name":"黄石"},{"id":"","name":"黄冈"},{"id":"","name":"衡阳"},{"id":"","name":"怀化"},{"id":"","name":"惠州"},{"id":"","name":"河源"},{"id":"","name":"贺州"},{"id":"","name":"河池"},{"id":"","name":"海口"},{"id":"","name":"红河哈尼族彝族自治州"},{"id":"","name":"汉中"},{"id":"","name":"海东"},{"id":"","name":"海北藏族自治州"},{"id":"","name":"黄南藏族自治州"},{"id":"","name":"海南藏族自治州"},{"id":"","name":"海西蒙古族藏族自治州"},{"id":"","name":"哈密"},{"id":"","name":"和田地区"}]},{"sortLetters":"J","data":[{"id":"","name":"晋城"},{"id":"","name":"晋中"},{"id":"","name":"锦州"},{"id":"","name":"吉林"},{"id":"","name":"鸡西"},{"id":"","name":"佳木斯"},{"id":"","name":"嘉兴"},{"id":"","name":"金华"},{"id":"","name":"景德镇"},{"id":"","name":"九江"},{"id":"","name":"吉安"},{"id":"","name":"济南"},{"id":"","name":"济宁"},{"id":"","name":"焦作"},{"id":"","name":"济源"},{"id":"","name":"荆门"},{"id":"","name":"荆州"},{"id":"","name":"江门"},{"id":"","name":"揭阳"},{"id":"","name":"嘉峪关"},{"id":"","name":"金昌"},{"id":"","name":"酒泉"}]},{"sortLetters":"K","data":[{"id":"","name":"开封"},{"id":"","name":"昆明"},{"id":"","name":"可克达拉"},{"id":"","name":"昆玉"},{"id":"","name":"克拉玛依"},{"id":"","name":"克孜勒苏柯尔克孜自治州"},{"id":"","name":"喀什地区"}]},{"sortLetters":"L","data":[{"id":"","name":"廊坊"},{"id":"","name":"临汾"},{"id":"","name":"吕梁"},{"id":"","name":"辽阳"},{"id":"","name":"辽源"},{"id":"","name":"连云港"},{"id":"","name":"丽水"},{"id":"","name":"六安"},{"id":"","name":"龙岩"},{"id":"","name":"莱芜"},{"id":"","name":"临沂"},{"id":"","name":"聊城"},{"id":"","name":"洛阳"},{"id":"","name":"娄底"},{"id":"","name":"柳州"},{"id":"","name":"来宾"},{"id":"","name":"乐东黎族自治县"},{"id":"","name":"临高县"},{"id":"","name":"陵水黎族自治县"},{"id":"","name":"泸州"},{"id":"","name":"乐山"},{"id":"","name":"凉山彝族自治州"},{"id":"","name":"六盘水"},{"id":"","name":"丽江"},{"id":"","name":"临沧"},{"id":"","name":"拉萨"},{"id":"","name":"林芝"},{"id":"","name":"兰州"},{"id":"","name":"陇南"},{"id":"","name":"临夏回族自治州"}]},{"sortLetters":"M","data":[{"id":"","name":"牡丹江"},{"id":"","name":"马鞍山"},{"id":"","name":"茂名"},{"id":"","name":"梅州"},{"id":"","name":"绵阳"},{"id":"","name":"眉山"}]},{"sortLetters":"N","data":[{"id":"","name":"南京"},{"id":"","name":"南通"},{"id":"","name":"宁波"},{"id":"","name":"南平"},{"id":"","name":"宁德"},{"id":"","name":"南昌"},{"id":"","name":"南阳"},{"id":"","name":"南宁"},{"id":"","name":"内江"},{"id":"","name":"南充"},{"id":"","name":"怒江傈僳族自治州"},{"id":"","name":"那曲地区"}]},{"sortLetters":"P","data":[{"id":"","name":"盘锦"},{"id":"","name":"萍乡"},{"id":"","name":"平顶山"},{"id":"","name":"濮阳"},{"id":"","name":"攀枝花"},{"id":"","name":"普洱"},{"id":"","name":"平凉"}]},{"sortLetters":"Q","data":[{"id":"","name":"秦皇岛"},{"id":"","name":"齐齐哈尔"},{"id":"","name":"七台河"},{"id":"","name":"衢州"},{"id":"","name":"泉州"},{"id":"","name":"青岛"},{"id":"","name":"潜江"},{"id":"","name":"清远"},{"id":"","name":"钦州"},{"id":"","name":"琼海"},{"id":"","name":"琼中黎族苗族自治县"},{"id":"","name":"黔西南布依族苗族自治州"},{"id":"","name":"黔东南苗族侗族自治州"},{"id":"","name":"黔南布依族苗族自治州"},{"id":"","name":"曲靖"},{"id":"","name":"庆阳"}]},{"sortLetters":"R","data":[{"id":"","name":"日照"},{"id":"","name":"日喀则"}]},{"sortLetters":"S","data":[{"id":"","name":"苏州"},{"id":"","name":"石家庄"},{"id":"","name":"朔州"},{"id":"","name":"沈阳"},{"id":"","name":"四平"},{"id":"","name":"松原"},{"id":"","name":"双鸭山"},{"id":"","name":"绥化"},{"id":"","name":"上海"},{"id":"","name":"宿迁"},{"id":"","name":"绍兴"},{"id":"","name":"宿州"},{"id":"","name":"厦门"},{"id":"","name":"三明"},{"id":"","name":"上饶"},{"id":"","name":"三门峡"},{"id":"","name":"商丘"},{"id":"","name":"十堰"},{"id":"","name":"随州"},{"id":"","name":"神农架林区"},{"id":"","name":"邵阳"},{"id":"","name":"韶关"},{"id":"","name":"深圳"},{"id":"","name":"汕头"},{"id":"","name":"汕尾"},{"id":"","name":"三亚"},{"id":"","name":"三沙"},{"id":"","name":"遂宁"},{"id":"","name":"山南"},{"id":"","name":"商洛"},{"id":"","name":"石嘴山"},{"id":"","name":"石河子"},{"id":"","name":"双河"}]},{"sortLetters":"T","data":[{"id":"","name":"天津"},{"id":"","name":"唐山"},{"id":"","name":"太原"},{"id":"","name":"通辽"},{"id":"","name":"铁岭"},{"id":"","name":"通化"},{"id":"","name":"泰州"},{"id":"","name":"台州"},{"id":"","name":"铜陵"},{"id":"","name":"泰安"},{"id":"","name":"漯河"},{"id":"","name":"天门"},{"id":"","name":"屯昌县"},{"id":"","name":"铜仁"},{"id":"","name":"铜川"},{"id":"","name":"天水"},{"id":"","name":"吐鲁番"},{"id":"","name":"塔城地区"},{"id":"","name":"铁门关"},{"id":"","name":"图木舒克"}]},{"sortLetters":"W","data":[{"id":"","name":"乌海"},{"id":"","name":"乌兰察布"},{"id":"","name":"无锡"},{"id":"","name":"温州"},{"id":"","name":"芜湖"},{"id":"","name":"潍坊"},{"id":"","name":"威海"},{"id":"","name":"武汉"},{"id":"","name":"梧州"},{"id":"","name":"万宁"},{"id":"","name":"文昌"},{"id":"","name":"五指山"},{"id":"","name":"文山壮族苗族自治州"},{"id":"","name":"渭南"},{"id":"","name":"武威"},{"id":"","name":"吴忠"},{"id":"","name":"乌鲁木齐"},{"id":"","name":"五家渠"}]},{"sortLetters":"X","data":[{"id":"","name":"邢台"},{"id":"","name":"忻州"},{"id":"","name":"兴安盟"},{"id":"","name":"锡林郭勒盟"},{"id":"","name":"徐州"},{"id":"","name":"宣城"},{"id":"","name":"新余"},{"id":"","name":"新乡"},{"id":"","name":"许昌"},{"id":"","name":"信阳"},{"id":"","name":"襄阳"},{"id":"","name":"孝感"},{"id":"","name":"咸宁"},{"id":"","name":"仙桃"},{"id":"","name":"湘潭"},{"id":"","name":"湘西土家族苗族自治州"},{"id":"","name":"西双版纳傣族自治州"},{"id":"","name":"西安"},{"id":"","name":"咸阳"},{"id":"","name":"西宁"}]},{"sortLetters":"Y","data":[{"id":"","name":"阳泉"},{"id":"","name":"运城"},{"id":"","name":"营口"},{"id":"","name":"延边朝鲜族自治州"},{"id":"","name":"伊春"},{"id":"","name":"盐城"},{"id":"","name":"扬州"},{"id":"","name":"鹰潭"},{"id":"","name":"宜春"},{"id":"","name":"烟台"},{"id":"","name":"宜昌"},{"id":"","name":"岳阳"},{"id":"","name":"益阳"},{"id":"","name":"永州"},{"id":"","name":"阳江"},{"id":"","name":"云浮"},{"id":"","name":"玉林"},{"id":"","name":"宜宾"},{"id":"","name":"雅安"},{"id":"","name":"玉溪"},{"id":"","name":"延安"},{"id":"","name":"榆林"},{"id":"","name":"玉树藏族自治州"},{"id":"","name":"银川"},{"id":"","name":"伊犁哈萨克自治州"}]},{"sortLetters":"Z","data":[{"id":"","name":"张家口"},{"id":"","name":"朝阳"},{"id":"","name":"镇江"},{"id":"","name":"舟山"},{"id":"","name":"漳州"},{"id":"","name":"淄博"},{"id":"","name":"枣庄"},{"id":"","name":"郑州"},{"id":"","name":"周口"},{"id":"","name":"驻马店"},{"id":"","name":"株洲"},{"id":"","name":"张家界"},{"id":"","name":"珠海"},{"id":"","name":"湛江"},{"id":"","name":"肇庆"},{"id":"","name":"中山"},{"id":"","name":"重庆"},{"id":"","name":"重庆郊县"},{"id":"","name":"自贡"},{"id":"","name":"资阳"},{"id":"","name":"遵义"},{"id":"","name":"昭通"},{"id":"","name":"张掖"},{"id":"","name":"中卫"}]}]

打包下载地址：

https://files.cnblogs.com/files/wukong1688/CitySelect.zip

本博客地址： wukong1688

本文原文地址：https://www.cnblogs.com/wukong1688/p/11155025.html

转载请著名出处！谢谢~~