React Native实现城市选择列表,仿联系人列表

项目地址源码地址点我
如果有不懂的问题,可以在评论区留言, 看到了就回复,每天都能回复

城市选择预览

'use strict';
import React from "react"
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    Dimensions,
    SectionList,
    FileList,
    ListView
} from 'react-native';
const { width, height } = Dimensions.get('window');
// 适配性函数
const UIWIDTH = 750
export function rx(UIPX) {
    return Math.round(UIPX * width / UIWIDTH);
}
import cityIndex from "./cityIndex"
// 字母的高度
const CONTENT_LIST_INDEX = rx(60)
// 每一个城市的高度
const CONTENT_LIST_TAG = rx(80)
export default class CityList extends React.Component {
    constructor(props) {
        super(props);
        this.dSource = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
        this.sectionList = null
        this.dealCity()
    }
    componentDidMount = () => {
        this.initPage()
    }
    // 此页面初始化
    initPage = () => {
        this.sectionList = this.refs.sectionList

    }
    //  二次处理数据
    dealCity = () => {
        // 在最前面追加数据
        let p = cityIndex
        // p.unshift({ sortLetters: "最近", data: [{ name: "郑州1" }, { name: "北京2" }, { "name": "上海3" }] })
        p.unshift({ sortLetters: "定位", data: [{ name: "郑州" }] })
    }
    _renderSectionHeader = ({ section }) => {
        return (
            {section["sortLetters"]}
        )

    }
    _renderItem = ({ item, section }) => {
        if (section["sortLetters"] == "定位") {
            return ( {
                this.selectCity(item)
            }}>
                    
                        郑州
                    
                )
        } else {
            return ( {
                this.selectCity(item)
            }}>
                    {item["name"]}
                )
        }
    }

    _renderHistory = () => {
        return (
            {section["data"].map(itemIn => {
                return (
                    {itemIn["name"]}
                )
            })}
        )
    }
    _scrollTo = (index) => {
        // console.log(index)
        this.sectionList.scrollToLocation({
            animated: true,
            sectionIndex: index,
            itemIndex: 0,
            // 补偿高度偏移
            viewOffset: CONTENT_LIST_TAG * 4,
            // viewOffset:0
        })
    }
    selectCity = (cityItem) => {
        console.log(cityItem)
    }
    render = () => {
        // 右侧列表
        let rightIndex = [...cityIndex.map((item, index) => {
            return ( {

                this._scrollTo(index)
            }}>
                    {item["sortLetters"]}
                )
        })]
        return (
            
                {/** 1.选择当前的定位*/}
                {/** 2.渲染最近打开的地理位置*/}
                {/** 3.渲染整个列表*/}
                
                    
                         "" + index}
                            getItemLayout={(data, index) => {
                                return {
                                    index,
                                    // 偏移高度 = 每一个城市(CONTENT_LIST_TAG)x数量+字母高度(CONTENT_LIST_INDEX)
                                    offset: CONTENT_LIST_TAG * (index) + CONTENT_LIST_INDEX,
                                    length: CONTENT_LIST_TAG
                                }
                            }}
                        >
                    
                
                
                    {rightIndex}
                
            
        )
    }
}
const styles = StyleSheet.create({
    page: {
        flex: 1,
        height,
        width,
        backgroundColor: "#f5f5f5"
    },
    // 中间内容
    container: {
        flex: 1,
        flexDirection: "column",
        backgroundColor: "#fff"
    },

    contentList: {
        backgroundColor: "#fff",
    },
    // 1.选择当前的定位
    // 定位的样式
    // 2.渲染最近打开的地理位置
    contentListTagMap: {
        height: CONTENT_LIST_TAG,
        width,
        paddingHorizontal: rx(20),
        backgroundColor: "#f5f5f5",
        flexDirection: "row",
        alignItems: "center",
    },
    contentListTagTextMap: {
        height: CONTENT_LIST_TAG,
        width: (width - 30) / 3,
        backgroundColor: "#f5f5f5",
    },
    contentListTagTextMapIn: {
        lineHeight: CONTENT_LIST_TAG - rx(30),
        height: CONTENT_LIST_TAG - rx(30),
        width: (width - 40) / 3,
        textAlign: "center",
        backgroundColor: "#fff",
        color: "#999",
        fontWeight: "bold",
        borderRadius: rx(10),
        borderWidth: 1,
        borderColor: "#ddd",
    },
    // 3.渲染整个列表
    contentListIndex: {
        height: CONTENT_LIST_INDEX,
        width,
        paddingHorizontal: rx(20),
        backgroundColor: "#f5f5f5",
    },
    contentListIndexText: {
        height: CONTENT_LIST_INDEX,
        width,
        lineHeight: CONTENT_LIST_INDEX,
        fontSize: rx(36),
        color: "#f60",
        fontFamily: "iconfont",
    },
    contentListTag: {
        height: CONTENT_LIST_TAG,
        width,
        paddingHorizontal: rx(20),
        backgroundColor: "#fff",
    },
    contentListTagText: {
        height: CONTENT_LIST_TAG,
        width,
        lineHeight: CONTENT_LIST_TAG,
        color: "#999",
        fontWeight: "bold"
    },
    // 右侧
    rightIndex: {
        position: "absolute",
        right: rx(10),
        top: rx(20),
        bottom: 0,
        height,
        backgroundColor: "#fff",
        alignItems: "center"
    },
    indexBox: {
        height: rx(50),
        backgroundColor: "#fff",
    },
    indexText: {
        fontSize: rx(30),
        color: "#f60",
        fontWeight: "bold"
    }
});