React-native實戰系列詳情 - 前端,react-hooks 溪抱魚博客

React-native實戰系列

本文是關於 React-native 實戰的系列內容，包括表單組件的封裝（如 input、select、Toggling、DateTimePicker 等）和懶加載列表的實現。懶加載列表通過定義數據源、繪製組件圖，運用相關 API 實現功能，並處理了搜索排序等邏輯。最後提到若有問題可通過[沸點]聯繫作者。

關聯問題: 如何優化懶加載效果表單樣式能自定義嗎安卓日期選擇器難點

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" />
      <Input
        label="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}>
        <Select
          label="Size"
          items={sizes}
          selectedValue={selectedSize}
          onValueChange={(size) => {
            setSelectedSize(size);
            setSelectedGarment(null);
            setAvailableGarments(
              garments.filter((i) => i.sizes.includes(size))
            );
          }}
        />
        <Select
          label="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 = 0

  while (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 (
    <FlatList
      data={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 (
    <List
      data={pdata}
      fetchItems={fetchItems}
      refreshItems={refreshItems}
      isRefreshing={isRefreshing}
      asc={asc}
      onFilter={text => {
        setFilter(text)
      }}
      onSort={() => {
        setAsc(!asc)
      }}
    />
  )
}

export default ListContainer

3、結束

到這裏我們已經瞭解了最基本的兩種場景表單和列表，，em如果大家有問題，或者想學點更深入的東西直接看沸點加我就好，免費課就是為了讓大家學懂跨端框架。

溪抱魚博客

溪抱魚博客

博客 / 詳情