React Native可復(fù)用 UI分離布局組件和狀態(tài)組件技巧

更新時(shí)間：2022年09月07日 16:10:31 作者：todoit

這篇文章主要為大家介紹了React Native可復(fù)用 UI分離布局組件和狀態(tài)組件使用技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

單選，多選，是很常見的 UI 組件，這里以它們?yōu)槔?，來講解如何分離布局組件和狀態(tài)組件，以實(shí)現(xiàn)較好的復(fù)用性。

假如我們要實(shí)現(xiàn)如下需求：

這類 UI 有如下特點(diǎn)：

不管是單選還是多選，都可以有網(wǎng)格布局，我們可以把這個(gè)網(wǎng)格布局單獨(dú)抽離出來，放到一個(gè)獨(dú)立的組件中。
多選有 Label 形式和 CheckBox 形式，表現(xiàn)形式不一樣，但是狀態(tài)邏輯是一樣的，我們可以單獨(dú)封裝這個(gè)狀態(tài)邏輯。
單選有 Label 形式和 RadioButton 形式，表現(xiàn)形式不一樣，但是狀態(tài)邏輯是一樣的，我們可以單獨(dú)封裝這個(gè)狀態(tài)邏輯。
布局可以很復(fù)雜，在某個(gè)層級中，才會(huì)發(fā)生選擇行為。

現(xiàn)在讓我們一步一步來實(shí)現(xiàn)一個(gè)設(shè)計(jì)良好的，可復(fù)用的 UI 組件。

包裝 Context.Provider 作為父組件

為了實(shí)現(xiàn)父子組件的跨層級通訊，我們需要使用 React.Context。

首先來實(shí)現(xiàn) CheckGroup 組件。

// CheckContext.ts
export interface Item<T> {
  label: string
  value: T
}
export interface CheckContext<T> {
  checkedItems: Array<Item<T>>
  setCheckedItems: (items: Array<Item<T>>) => void
}
export const CheckContext = React.createContext<CheckContext<any>>({
  checkedItems: [],
  setCheckedItems: () => {},
})

CheckGroup 實(shí)際上是個(gè) CheckContext.Provider。

// CheckGroup.tsx
import { CheckContext, Item } from './CheckContext'
interface CheckGroupProps<T> {
  limit?: number
  checkedItems?: Array<Item<T>>
  onCheckedItemsChanged?: (items: Array<Item<T>>) => void
}
export default function CheckGroup({
  limit = 0,
  checkedItems = [],
  onCheckedItemsChanged,
  children,
}: PropsWithChildren<CheckGroupProps<any>>) {
  const setCheckedItems = (items: Array<Item<any>>) => {
    if (limit <= 0 || items.length <= limit) {
      onCheckedItemsChanged?.(items)
    }
  }
  return (
    <CheckContext.Provider value={{ checkedItems, setCheckedItems }}>
      {children}
    </CheckContext.Provider>
  )
}

使用 Context Hook 來實(shí)現(xiàn)子組件

復(fù)選組件有多種表現(xiàn)形式，我們先來實(shí)現(xiàn) CheckLabel。主要是使用 useContext 這個(gè) hook。

// CheckLabel.tsx
import { CheckContext, Item } from './CheckContext'
interface CheckLabelProps<T> {
  item: Item<T>
  style?: StyleProp<TextStyle>
  checkedStyle?: StyleProp<TextStyle>
}
export default function CheckLabel({
  item,
  style,
  checkedStyle,
}: CheckLabelProps<any>) {
  const { checkedItems, setCheckedItems } = useContext(CheckContext)
  const checked = checkedItems?.includes(item)
  return (
    <Pressable
      onPress={() => {
        if (checked) {
          setCheckedItems(checkedItems.filter((i) => i !== item))
        } else {
          setCheckedItems([...checkedItems, item])
        }
      }}>
      <Text
        style={[
          styles.label,
          style,
          checked ? [styles.checked, checkedStyle] : undefined,
        ]}>
        {item.label}
      </Text>
    </Pressable>
  )
}

現(xiàn)在組合 CheckGroup 和 CheckLabel，看看效果：

可見，復(fù)選功能已經(jīng)實(shí)現(xiàn)，但我們需要的是網(wǎng)格布局哦。好的，現(xiàn)在就去寫一個(gè) GridVeiw 來實(shí)現(xiàn)網(wǎng)格布局。

使用 React 頂層 API 動(dòng)態(tài)設(shè)置樣式

我們的 GridView 可以通過 numOfRow 屬性來指定列數(shù)，默認(rèn)值是 3。

這里使用了一些 React 頂層 API，掌握它們，可以做一些有趣的事情。

// GridView.tsx
import { useLayout } from '@react-native-community/hooks'
import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native'
interface GridViewProps {
  style?: StyleProp<ViewStyle>
  numOfRow?: number
  spacing?: number
  verticalSpacing?: number
}
export default function GridView({
  style,
  numOfRow = 3,
  spacing = 16,
  verticalSpacing = 8,
  children,
}: PropsWithChildren<GridViewProps>) {
  const { onLayout, width } = useLayout()
  const itemWidth = (width - (numOfRow - 1) * spacing - 0.5) / numOfRow
  const count = React.Children.count(children)
  return (
    <View style={[styles.container, style]} onLayout={onLayout}>
      {React.Children.map(children, function (child: any, index) {
        const style = child.props.style
        return React.cloneElement(child, {
          style: [
            style,
            {
              width: itemWidth,
              marginLeft: index % numOfRow !== 0 ? spacing : 0,
              marginBottom:
                Math.floor(index / numOfRow) <
                Math.floor((count - 1) / numOfRow)
                  ? verticalSpacing
                  : 0,
            },
          ],
        })
      })}
    </View>
  )
}

現(xiàn)在組合 CheckGroup CheckLabel 和 GridView 三者，看看效果：

嗯，效果很好。

復(fù)用 Context，實(shí)現(xiàn)其它子組件

現(xiàn)在來實(shí)現(xiàn) CheckBox 這個(gè)最為常規(guī)的復(fù)選組件：

// CheckBox.tsx
import { CheckContext, Item } from '../CheckContext'
interface CheckBoxProps<T> {
  item: Item<T>
  style?: StyleProp<ViewStyle>
}
export default function CheckBox({ item, style }: CheckBoxProps<any>) {
  const { checkedItems, setCheckedItems } = useContext(CheckContext)
  const checked = checkedItems?.includes(item)
  return (
    <Pressable
      onPress={() => {
        if (checked) {
          setCheckedItems(checkedItems.filter((i) => i !== item))
        } else {
          setCheckedItems([...checkedItems, item])
        }
      }}
      hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
      <View style={[styles.container, style]}>
        <Image
          source={
            checked ? require('./checked.png') : require('./unchecked.png')
          }
        />
        <Text style={[styles.label, checked ? styles.checkedLabel : undefined]}>
          {item.label}
        </Text>
      </View>
    </Pressable>
  )
}

組合 CheckGroup 和 CheckBox，效果如下：

抽取共同狀態(tài)邏輯

CheckLabel 和 CheckBox 有些共同的狀態(tài)邏輯，我們可以把這些共同的狀態(tài)邏輯抽取到一個(gè)自定義 Hook 中。

// CheckContext.ts
export function useCheckContext(item: Item<any>) {
  const { checkedItems, setCheckedItems } = useContext(CheckContext)
  const checked = checkedItems?.includes(item)
  const onPress = () => {
    if (checked) {
      setCheckedItems(checkedItems.filter((i) => i !== item))
    } else {
      setCheckedItems([...checkedItems, item])
    }
  }
  return [checked, onPress] as const
}

于是， CheckLabel 和 CheckBox 的代碼可以簡化為：

// CheckLabel.tsx
import { Item, useCheckContext } from './CheckContext'
interface CheckLabelProps<T> {
  item: Item<T>
  style?: StyleProp<TextStyle>
  checkedStyle?: StyleProp<TextStyle>
}
export default function CheckLabel({
  item,
  style,
  checkedStyle,
}: CheckLabelProps<any>) {
  const [checked, onPress] = useCheckContext(item)
  return (
    <Pressable onPress={onPress}>
      <Text
        style={[
          styles.label,
          style,
          checked ? [styles.checked, checkedStyle] : undefined,
        ]}>
        {item.label}
      </Text>
    </Pressable>
  )
}

// CheckBox.tsx
import { Item, useCheckContext } from '../CheckContext'
interface CheckBoxProps<T> {
  item: Item<T>
  style?: StyleProp<ViewStyle>
}
export default function CheckBox({ item, style }: CheckBoxProps<any>) {
  const [checked, onPress] = useCheckContext(item)
  return (
    <Pressable
      onPress={onPress}
      hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
      <View style={[styles.container, style]}>
        <Image
          source={
            checked ? require('./checked.png') : require('./unchecked.png')
          }
        />
        <Text style={[styles.label, checked ? styles.checkedLabel : undefined]}>
          {item.label}
        </Text>
      </View>
    </Pressable>
  )
}

自由組合父組件與子組件

接下來，我們可以如法炮制 Radio 相關(guān)組件，譬如 RadioGroup RadioLabel RadioButton 等等。

然后可以愉快地把它們組合在一起，本文開始頁面截圖的實(shí)現(xiàn)代碼如下：

// LayoutAndState.tsx
interface Item {
  label: string
  value: string
}
const langs = [
  { label: 'JavaScript', value: 'js' },
  { label: 'Java', value: 'java' },
  { label: 'OBJC', value: 'Objective-C' },
  { label: 'GoLang', value: 'go' },
  { label: 'Python', value: 'python' },
  { label: 'C#', value: 'C#' },
]
const platforms = [
  { label: 'Android', value: 'Android' },
  { label: 'iOS', value: 'iOS' },
  { label: 'React Native', value: 'React Native' },
  { label: 'Spring Boot', value: 'spring' },
]
const companies = [
  { label: '上市', value: '上市' },
  { label: '初創(chuàng)', value: '初創(chuàng)' },
  { label: '國企', value: '國企' },
  { label: '外企', value: '外企' },
]
const salaries = [
  { label: '10 - 15k', value: '15' },
  { label: '15 - 20k', value: '20' },
  { label: '20 - 25k', value: '25' },
  { label: '25 - 30k', value: '30' },
]
const edus = [
  { label: '大專', value: '大專' },
  { label: '本科', value: '本科' },
  { label: '研究生', value: '研究生' },
]
function LayoutAndState() {
  const [checkedLangs, setCheckedLangs] = useState<Item[]>([])
  const [checkedPlatforms, setCheckedPlatforms] = useState<Item[]>([])
  const [checkedCompanies, setCheckedCompanies] = useState<Item[]>([])
  const [salary, setSalary] = useState<Item>()
  const [education, setEducation] = useState<Item>()
  return (
    <View style={styles.container}>
      <Text style={styles.header}>你擅長的語言（多選）</Text>
      <CheckGroup
        checkedItems={checkedLangs}
        onCheckedItemsChanged={setCheckedLangs}>
        <GridView style={styles.grid}>
          {langs.map((item) => (
            <CheckLabel key={item.label} item={item} style={styles.gridItem} />
          ))}
        </GridView>
      </CheckGroup>
      <Text style={styles.header}>你擅長的平臺（多選）</Text>
      <CheckGroup
        checkedItems={checkedPlatforms}
        onCheckedItemsChanged={setCheckedPlatforms}>
        <GridView style={styles.grid} numOfRow={2}>
          {platforms.map((item) => (
            <CheckLabel key={item.label} item={item} style={styles.gridItem} />
          ))}
        </GridView>
      </CheckGroup>
      <Text style={styles.header}>你期望的公司（多選）</Text>
      <CheckGroup
        checkedItems={checkedCompanies}
        onCheckedItemsChanged={setCheckedCompanies}>
        <View style={styles.row}>
          {companies.map((item) => (
            <CheckBox key={item.label} item={item} style={styles.rowItem} />
          ))}
        </View>
      </CheckGroup>
      <Text style={styles.header}>你期望的薪資（單選）</Text>
      <RadioGroup checkedItem={salary} onItemChecked={setSalary}>
        <GridView style={styles.grid} numOfRow={4}>
          {salaries.map((item) => (
            <RadioLabel key={item.label} item={item} style={styles.gridItem} />
          ))}
        </GridView>
      </RadioGroup>
      <Text style={styles.header}>你的學(xué)歷（單選）</Text>
      <RadioGroup checkedItem={education} onItemChecked={setEducation}>
        <View style={styles.row}>
          {edus.map((item) => (
            <RadioButton key={item.label} item={item} style={styles.rowItem} />
          ))}
        </View>
      </RadioGroup>
    </View>
  )
}
export default withNavigationItem({
  titleItem: {
    title: 'Layout 和 State 分離',
  },
})(LayoutAndState)
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'stretch',
    paddingLeft: 32,
    paddingRight: 32,
  },
  header: {
    color: '#222222',
    fontSize: 17,
    marginTop: 32,
  },
  grid: {
    marginTop: 8,
  },
  gridItem: {
    marginTop: 8,
  },
  row: {
    flexDirection: 'row',
    marginTop: 12,
  },
  rowItem: {
    marginRight: 16,
  },
})

請留意 CheckGroup RadioGroup GridView CheckLabel RadioLabel CheckBox RadioButton 之間的組合方式。