您现在的位置是：网站首页> 编程资料编程资料

React Native可复用 UI分离布局组件和状态组件技巧_React_

2023-05-24 420人已围观

简介 React Native可复用 UI分离布局组件和状态组件技巧_React_

引言

单选，多选，是很常见的 UI 组件，这里以它们为例，来讲解如何分离布局组件和状态组件，以实现较好的复用性。

假如我们要实现如下需求：

这类 UI 有如下特点：

  • 不管是单选还是多选，都可以有网格布局，我们可以把这个网格布局单独抽离出来，放到一个独立的组件中。
  • 多选有 Label 形式和 CheckBox 形式，表现形式不一样，但是状态逻辑是一样的，我们可以单独封装这个状态逻辑。
  • 单选有 Label 形式和 RadioButton 形式，表现形式不一样，但是状态逻辑是一样的，我们可以单独封装这个状态逻辑。
  • 布局可以很复杂，在某个层级中，才会发生选择行为。

现在让我们一步一步来实现一个设计良好的，可复用的 UI 组件。

包装 Context.Provider 作为父组件

为了实现父子组件的跨层级通讯，我们需要使用 React.Context。

首先来实现 CheckGroup 组件。

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

CheckGroup 实际上是个 CheckContext.Provider。

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

使用 Context Hook 来实现子组件

复选组件有多种表现形式，我们先来实现 CheckLabel。主要是使用 useContext 这个 hook。

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

现在组合 CheckGroup 和 CheckLabel，看看效果：

可见，复选功能已经实现，但我们需要的是网格布局哦。好的，现在就去写一个 GridVeiw 来实现网格布局。

使用 React 顶层 API 动态设置样式

我们的 GridView 可以通过 numOfRow 属性来指定列数，默认值是 3。

这里使用了一些 React 顶层 API，掌握它们，可以做一些有趣的事情。

// GridView.tsx import { useLayout } from '@react-native-community/hooks' import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native' interface GridViewProps { style?: StyleProp numOfRow?: number spacing?: number verticalSpacing?: number } export default function GridView({ style, numOfRow = 3, spacing = 16, verticalSpacing = 8, children, }: PropsWithChildren) { const { onLayout, width } = useLayout() const itemWidth = (width - (numOfRow - 1) * spacing - 0.5) / numOfRow const count = React.Children.count(children) return (  {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, }, ], }) })}  ) }

现在组合 CheckGroupCheckLabel 和 GridView 三者，看看效果：

嗯，效果很好。

复用 Context，实现其它子组件

现在来实现 CheckBox 这个最为常规的复选组件：

// CheckBox.tsx import { CheckContext, Item } from '../CheckContext' interface CheckBoxProps { item: Item style?: StyleProp } export default function CheckBox({ item, style }: CheckBoxProps) { const { checkedItems, setCheckedItems } = useContext(CheckContext) const checked = checkedItems?.includes(item) return (  { if (checked) { setCheckedItems(checkedItems.filter((i) => i !== item)) } else { setCheckedItems([...checkedItems, item]) } }} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}> {item.label}  ) }

组合 CheckGroup 和 CheckBox，效果如下：

抽取共同状态逻辑

CheckLabel 和 CheckBox 有些共同的状态逻辑，我们可以把这些共同的状态逻辑抽取到一个自定义 Hook 中。

// CheckContext.ts export function useCheckContext(item: Item) { 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 { item: Item style?: StyleProp checkedStyle?: StyleProp } export default function CheckLabel({ item, style, checkedStyle, }: CheckLabelProps) { const [checked, onPress] = useCheckContext(item) return (  {item.label}  ) } 
// CheckBox.tsx import { Item, useCheckContext } from '../CheckContext' interface CheckBoxProps { item: Item style?: StyleProp } export default function CheckBox({ item, style }: CheckBoxProps) { const [checked, onPress] = useCheckContext(item) return (  {item.label}  ) }

自由组合父组件与子组件

接下来，我们可以如法炮制 Radio 相关组件，譬如 RadioGroupRadioLabelRadioButton 等等。

然后可以愉快地把它们组合在一起，本文开始页面截图的实现代码如下：

// 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: '初创', value: '初创' }, { 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([]) const [checkedPlatforms, setCheckedPlatforms] = useState([]) const [checkedCompanies, setCheckedCompanies] = useState([]) const [salary, setSalary] = useState() const [education, setEducation] = useState() return ( 你擅长的语言（多选） {langs.map((item) => (  ))} 你擅长的平台（多选） {platforms.map((item) => (

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网