React Native城市选择与切换
React 选择 切换 城市 native
2023-09-27 14:22:50 时间
虽然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-router-flux 页面跳转与传值
- react-native 初始化 各种报错 及 解决方案
- react-document-title
- react 项目实战(三)表单验证
- react 从零开始搭建开发环境
- react、vue中的key有什么作用?(key的内部原理)
- React和Vue组件间数据传递demo
- 新版create-react-app+webpack4跨域
- react navite 学习资料
- react路由传参
- vscode react中标签自动补全 vscode jsx语法自动补全html标签
- React-Redux系列2:Provider提供器和Connect连接器
- React的单向数据流与Vue的双向绑定
- React之JSX里render中return方法添加括号()或者[]
- React:前端配置代理解决跨域问题