React-native实战系列
文章总结：
这次我学习了 React Native 实战中表单组件的封装和懒加载列表的实现！🛠️ 在表单方面，文章教我封装了常用的 Input, Select, Toggling 和 DateTimePicker 等组件，让它们可复用还能自定义样式，💡 但要注意 Android DateTimePicker 可能需要特别适配。
懒加载列表部分，文章介绍了如何利用 FlatList 实现按需加载数据，并且处理了搜索和排序逻辑，👍 感觉对性能和用户体验提升很有帮助！文章还提到可以从分页、滚动监听和图片懒加载等方面进一步优化。
总之，学到了组件封装和列表优化的实用技巧！如果有问题，作者欢迎大家通过 [联系我] 交流哦！💬
1、组件的使用
移动端也有表单，表单也是我经常接触的一个场景，那么让我们就实现一些表单组件吧。
1.1、封装一个input
我们先从rn的TextInput输入框开始
input
import React, { useState } from 'react'
import PropTypes from 'prop-types'
import { Text, TextInput, View } from 'react-native'
import styles from './styles'
function Input(props) {return (<View style={styles.textInputContainer}><Text style={styles.textInputLabel}>{props.label}</Text><TextInput style={styles.textInput} {...props} /></View>)
}
Input.propTypes = {label: PropTypes.string,
}export default function CollectingTextInput() {const [changedText, setChangedText] = useState('')const [submittedText, setSubmittedText] = useState('')return (<View style={styles.container}><Input label="Basic Text Input:" /><Input label="Password Input:" secureTextEntry /><Input label="Return Key:" returnKeyType="search" /><Input label="Placeholder Text:" placeholder="Search" /><Inputlabel="Input Events:"onChangeText={e => {setChangedText(e)}}onSubmitEditing={e => {setSubmittedText(e.nativeEvent.text)}}onFocus={() => {setChangedText('')setSubmittedText('')}}/><Text>Changed: {changedText}</Text><Text>Submitted: {submittedText}</Text></View>)
}
让我们先看看在屏幕上这些输入框是这样的。
secureTextEntry密码输入盘，你的输入会被***挡住。
Return key，这个值决定你的小键盘右下角的值。
我们也可以通过keyboardType去控制弹出的小键盘类型，比如numeric
1.2、封装一个select
首先
expo install @react-native-picker/picker然后我们可以用Picker实现一个选择器。 Select
import { View, Text } from 'react-native'
import { Picker } from '@react-native-picker/picker'
import styles from './styles'
export default function Select(props) {return (<View><Text style={styles.pickerLabel}>{props.label}</Text><Picker {...props}>{props.items.map(i => (<Picker.Item key={i.label} {...i} />))}</Picker></View>)
}样式
import { StyleSheet } from 'react-native'
export default StyleSheet.create({container: {flex: 1,flexDirection: 'column',backgroundColor: 'ghostwhite',justifyContent: 'center',},pickersBlock: {flex: 2,flexDirection: 'row',justifyContent: 'space-around',alignItems: 'center',},pickerHeight: {height: 250,},pickerContainer: {flex: 1,flexDirection: 'column',alignItems: 'center',backgroundColor: 'white',padding: 6,height: 240,},pickerLabel: {fontSize: 14,fontWeight: 'bold',},picker: {width: 150,backgroundColor: 'white',},selection: {flex: 1,textAlign: 'center',},
})app.js
import React, { useState } from "react";
import { View, Text } from "react-native";
import styles from "./styles";
import Select from "./Select";const sizes = [{ label: "", value: null },{ label: "S", value: "S" },{ label: "M", value: "M" },{ label: "L", value: "L" },{ label: "XL", value: "XL" },
];const garments = [{ label: "", value: null, sizes: ["S", "M", "L", "XL"] },{ label: "Socks", value: 1, sizes: ["S", "L"] },{ label: "Shirt", value: 2, sizes: ["M", "XL"] },{ label: "Pants", value: 3, sizes: ["S", "L"] },{ label: "Hat", value: 4, sizes: ["M", "XL"] },
];export default function SelectingOptions() {const [availableGarments, setAvailableGarments] = useState([]);const [selectedSize, setSelectedSize] = useState(null);const [selectedGarment, setSelectedGarment] = useState(null);const [selection, setSelection] = useState("");return (<View style={styles.container}><View style={styles.pickersBlock}><Selectlabel="Size"items={sizes}selectedValue={selectedSize}onValueChange={(size) => {setSelectedSize(size);setSelectedGarment(null);setAvailableGarments(garments.filter((i) => i.sizes.includes(size)));}}/><Selectlabel="Garment"items={availableGarments}selectedValue={selectedGarment}onValueChange={(garment) => {setSelectedGarment(garment);setSelection(${selectedSize} ${ garments.find((i) => i.value === garment).label });}}/></View><Text style={styles.selection}>{selection}</Text></View>);
}最终效果如下：
1.3、封装一个Toggling
import { View, Text, Switch } from 'react-native'
import styles from './styles'
export default function CustomSwitch(props) {return (<View style={styles.customSwitch}><Text>{props.label}</Text><Switch {...props} /></View>)
}
import React, { useState } from 'react'
import { View } from 'react-native'
import styles from './styles'
import Switch from './Switch'
export default function TogglingOnAndOff() {const [first, setFirst] = useState(false)const [second, setSecond] = useState(false)return (<View style={styles.container}><Switch label="Disable Next Switch" value={first} disabled={second} onValueChange={setFirst} /><Switch label="Disable Previous Switch" value={second} disabled={first} onValueChange={setSecond} /></View>)
}效果如下:
1.3、实现一个DateTimePicker
首先下载依赖
expo install @react-native-community/datetimepicker然后我们开发一个ios的DateTimePicker组件
import React from 'react'
import { Text, View } from 'react-native'
import DateTimePicker from '@react-native-community/datetimepicker'
import styles from './styles'
export default function DatePicker(props) {return (<View style={styles.datePickerContainer}><Text style={styles.datePickerLabel}>{props.label}</Text><DateTimePicker mode="date" display="spinner" {...props} /></View>)
}ios上的表现
安卓会稍微麻烦一些
import { Text, View } from 'react-native'
import DateTimePicker from '@react-native-community/datetimepicker'
import styles from './styles'
function pickDate(options, onDateChange) {DateTimePicker.open(options).then(date => onDateChange(new Date(date.year, date.month, date.day)))
}
export default function DatePicker({ label, date, onDateChange }) {return (<View style={styles.datePickerContainer}><Text style={styles.datePickerLabel}>{label}</Text><Text onPress={() => pickDate({ date }, onDateChange)}>{date.toLocaleDateString()}</Text></View>)
}安卓上的表现
2、如何实现一个懒加载列表
假设现在有一个需求需要我们实现一个懒加载的列表，它还可以过滤、排序、下拉刷新。 首先我们需要一个手动定义一个数据源，我们可以通过迭代器,实现一个无线调用递增的promise去模拟api的调用，当每次调用fetchItems的时候，我们的cnt都会增加30。
function* genItems() {let cnt = 0while (true) {yield `Item ${cnt++}`}
}const items = genItems()export function fetchItems() {return Promise.resolve({json: () =>Promise.resolve({items: new Array(30).fill(null).map(() => items.next().value),}),})
}当我们定义了数据源后我们画一张整体的组件图吧。
我们先看一下我有哪些组件
这是我们最后想要的一个效果
ok,理论来说我们在写组件是应该跟随数据流，自上而下的写，但因为自下而上比较好让大家理解一点，我们就从里面往外面写。
我们先从FlatList开始，大家应该对它很陌生，它是一个rn的内置组件，那么要实现我们的功能需要哪些api那。
-
首先是懒加载我们需要使用
onEndReached如果我们不指定距离，它会在滑动到内容最底部的距离为当前列表可见长度的一半时触发，接受一个函数。 -
要实现下拉刷新，我们用
onRefresh这个api我们需要传一个回调函数进去。 -
而数据源是由
data指定。 -
而
ListHeaderComponent就是一个表头。
当我们已经知道需要哪些api了，就可以尝试写一下一个最基础的list组件
List
import PropTypes from 'prop-types'
import { Text, FlatList } from 'react-native'
import ListControls from './ListControls'
import styles from './styles'
export default function List({ data, fetchItems, refreshItems, isRefreshing, onFilter, onSort, asc }) {return (<FlatListdata={data}renderItem={({ item }) => <Text style={styles.item}>{item.value}</Text>}ListHeaderComponent={<ListControls {...{ onFilter, onSort, asc }} />}onEndReached={fetchItems}onRefresh={refreshItems}refreshing={isRefreshing}/>)
}List.propTypes = {fetchItems: PropTypes.func.isRequired,refreshItems: PropTypes.func.isRequired,isRefreshing: PropTypes.bool.isRequired,
}紧接着我们就需要去实现ListControls和ListContainer。 ListControls
import PropTypes from 'prop-types'
import { View } from 'react-native'
import styles from './styles'
import ListFilter from './ListFilter'
import ListSort from './ListSort'
export default function ListControls({ onFilter, onSort, asc }) {return (<View style={styles.controls}><ListFilter onFilter={onFilter} /><ListSort onSort={onSort} asc={asc} /></View>)
}ListControls.propTypes = {onFilter: PropTypes.func.isRequired,onSort: PropTypes.func.isRequired,asc: PropTypes.bool.isRequired,
}ListSort
import PropTypes from 'prop-types'
import { Text } from 'react-native'const arrows = new Map([[true, '▼'],[false, '▲'],
])
export default function ListSort({ onSort, asc }) {return <Text onPress={onSort}>{arrows.get(asc)}</Text>
}ListSort.propTypes = {onSort: PropTypes.func.isRequired,asc: PropTypes.bool.isRequired,
}ListFilter，这里autoFocus是进来就自动聚焦调出小键盘。
import PropTypes from 'prop-types'
import { View, TextInput } from 'react-native'
import styles from './styles'
export default function ListFilter({ onFilter }) {return (<View><TextInput autoFocus placeholder="Search" style={styles.filter} onChangeText={onFilter} /></View>)
}ListFilter.propTypes = {onFilter: PropTypes.func.isRequired,
}
可以看到在这三个部分并没有太多的逻辑代码，都是一些用于展示的代码。我把所有的逻辑代码都放在了container中。 container,此时想想我们需要在外层容器提供哪些状态。
-
一个控制排序的状态
asc -
一个控制
loading的状态isRefreshing -
一个数据源
pdata -
一个控制搜索过滤框的状态
filter然后我们需要处理哪些逻辑 * 搜索排序后的列表展示fetchItem->data->filterAndSort(data)->pdata=useMemo(data)* 每次往下拉的数据获取fetchItems* 刷新后拉取新数据refreshItems那么到这里我们就完成了一个懒加载、搜索、排序、下拉刷新的列表
import React, { useState, useEffect, useMemo } from 'react'
import * as api from './api'
import List from './List'
const filterAndSort = (text, asc, array) => {if (array.length) {return array.filter(i => text.length === 0 || i.value.includes(text)).sort(asc ? (a, b) => a.index - b.index : (a, b) => b.index - a.index)}
}const ListContainer = () => {const [data, setData] = useState([])const [isRefreshing, setIsRefreshing] = useState(false)const [asc, setAsc] = useState(true)const [filter, setFilter] = useState('')function fetchItems() {return api.fetchItems().then(resp => resp.json()).then(({ items }) => {setData([...data, ...items])})}//我这的刷新模拟的是拉取新数据的过程function refreshItems() {setIsRefreshing(true)return api.fetchItems({ refresh: true }).then(resp => resp.json()).then(({ items }) => {setData(items)}).finally(() => {setIsRefreshing(false)})}useEffect(() => {fetchItems()}, [])const pdata = useMemo(() => {return filterAndSort(filter, asc, data)}, [filter, asc, data])return (<Listdata={pdata}fetchItems={fetchItems}refreshItems={refreshItems}isRefreshing={isRefreshing}asc={asc}onFilter={text => {setFilter(text)}}onSort={() => {setAsc(!asc)}}/>)
}export default ListContainer# 3、结束
欢迎加入群聊，我们一起讨论一些更有趣的技术、商业、闲聊。
