ReactNative Hooks写法抽离子view

最新推荐文章于 2024-06-29 11:59:11 发布

it_remember

最新推荐文章于 2024-06-29 11:59:11 发布

阅读量655

点赞数 10

文章标签： react native java javascript

本文链接：https://blog.csdn.net/qq_34812958/article/details/135386856

版权

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>

}