ReactNative Hooks写法抽离子view

? const itemTop = (itemName: any, itemIcon: any) => {
? ? return <View style={[$row, $flex1, { padding: 8, backgroundColor: '#f3f6ff', borderRadius: 10, }]}>
? ? ? <IconFont size={65} name={itemIcon} />
? ? ? <View style={[$justifyAround, $flex1, { marginLeft: 20, }]}>
? ? ? ? <Text style={[{ textAlign: 'right', color: theme.primary.color }, $fontSize16, $fontWeight]} >99</Text>
? ? ? ? <Text style={[{ textAlign: 'right', color: '#7a869a' }, $fontSize12]}>{itemName}</Text>
? ? ? </View>
? ? </View>
? }

? const IItemTop = (info: any) => {
? ? return <View style={[$row, $flex1, { padding: 8, backgroundColor: '#f3f6ff', borderRadius: 10, }]}>
? ? ? <IconFont size={65} name={info.itemIcon} />
? ? ? <View style={[$justifyAround, $flex1, { marginLeft: 20, }]}>
? ? ? ? <Text style={[{ textAlign: 'right', color: theme.primary.color }, $fontSize16, $fontWeight]} >99</Text>
? ? ? ? <Text style={[{ textAlign: 'right', color: '#7a869a' }, $fontSize12]}>{info.itemName}</Text>
? ? ? </View>
? ? </View>
? }

? const HeadTop = () => {
? ? return <View>
? ? ? <View style={[$row, $flex1, { marginTop: 36, marginLeft: 20, marginRight: 20 }]}>
? ? ? ? {/* {itemTop('In', 'menuIn')} */}
? ? ? ? <IItemTop itemName={'In'} itemIcon={'menuIn'} />
? ? ? ? <View style={{ width: 10 }} />
? ? ? ? {itemTop('Received', 'menuReceived')}
? ? ? </View>

? ? ? <View style={[$row, $flex1, { marginTop: 16, marginLeft: 20, marginRight: 20 }]}>
? ? ? ? {itemTop('Sorted', 'menuSorted')}
? ? ? ? <View style={{ width: 10 }} />
? ? ? ? {itemTop('Check In', 'menuDelivered')}

? ? ? </View>

? ? ? <Text>Operation</Text>
? ? </View>

? }

两种写法