admin 管理员组

文章数量: 887007

React Native城市选择与切换

虽然React Native已经不在是当前热门的跨平台技术了，但是还是可以看到很多的公司和个人在用，Flutter有Flutter好，RN呢也有适合自己的地方，至于究竟哪个更好，我们不做过多的比较。
最近，我在升级之前的《React Native移动开发实战》一书，书中的项目有城市切换的功能，效果如下图所示。

可以看到，这个城市选择页面是很常规的，包含了当前定位城市和城市列表，右侧可以通过SlideBar进行快捷定位，除此之外，此组件还支持搜索功能。

首先，我们看一下城市列表，对于这一功能，我们可以使用SectionList组件，因为我们可以使用SectionList的ListHeaderComponent属性来实现当前定位布局，而右边的字母索引效果需要借助SectionList的scrollToLocation()函数，如下所示。

const _scrollTo = (index, letter) => {listViewRef?.current?.scrollToLocation({itemIndex: 0, sectionIndex: index});};

而搜索功能就更加简单了，使用FlatList组件展示即可，此处也可以使用list.map循环来开发列表功能。
CitySelectScreen.js

import React, {useState, useEffect} from 'react';
import {View,Text,TextI

本文标签： React Native城市选择与切换

版权声明：本文标题：React Native城市选择与切换 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1732354343h1533998.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。