React Native可復用 UI分離佈局組件和狀態組件技巧
引言
單選,多選,是很常見的 UI 組件,這裡以它們為例,來講解如何分離佈局組件和狀態組件,以實現較好的復用性。
假如我們要實現如下需求:
這類 UI 有如下特點:
- 不管是單選還是多選,都可以有網格佈局,我們可以把這個網格佈局單獨抽離出來,放到一個獨立的組件中。
- 多選有 Label 形式和 CheckBox 形式,表現形式不一樣,但是狀態邏輯是一樣的,我們可以單獨封裝這個狀態邏輯。
- 單選有 Label 形式和 RadioButton 形式,表現形式不一樣,但是狀態邏輯是一樣的,我們可以單獨封裝這個狀態邏輯。
- 佈局可以很復雜,在某個層級中,才會發生選擇行為。
現在讓我們一步一步來實現一個設計良好的,可復用的 UI 組件。
包裝 Context.Provider 作為父組件
為瞭實現父子組件的跨層級通訊,我們需要使用 React.Context
。
首先來實現 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
實際上是個 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 來實現子組件
復選組件有多種表現形式,我們先來實現 CheckLabel
。主要是使用 useContext
這個 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> ) }
現在組合 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<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> ) }
現在組合 CheckGroup
CheckLabel
和 GridView
三者,看看效果:
嗯,效果很好。
復用 Context,實現其它子組件
現在來實現 CheckBox
這個最為常規的復選組件:
// 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
,效果如下:
抽取共同狀態邏輯
CheckLabel
和 CheckBox
有些共同的狀態邏輯,我們可以把這些共同的狀態邏輯抽取到一個自定義 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
相關組件,譬如 RadioGroup
RadioLabel
RadioButton
等等。
然後可以愉快地把它們組合在一起,本文開始頁面截圖的實現代碼如下:
// 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<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}>你的學歷(單選)</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
之間的組合方式。
示例
這裡有一個示例,供你參考。
以上就是React Native可復用 UI分離佈局組件和狀態組件技巧的詳細內容,更多關於React Native UI分離組件的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- React Native 中實現確認碼組件示例詳解
- 適用於React Native 旋轉木馬應用程序介紹
- 微信小程序自定義復選框
- 使用pyqt5 實現ComboBox的鼠標點擊觸發事件
- ReactNative支付密碼輸入框實現詳解