情景
在我们开发中，我们通常需要对某一系列的组件 Coding, 但我们是程序员啊，我们怎么能容忍代码重复出现的坏味道呢。所以，对于一些列相同的操作我们就要用到循环处理了。
目标
我们需要将底部两个按钮 新建询价和 采购助手展示出来，并且点击他们的操作后有不同的交互。
coding
对于此情况，我们需要将对两个按钮做抽象，抽象为数组，在 render 函数里循环执行即可，这里有个地方需要说明一下，我们把事件处理函数也放在了抽象好的对象上，如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
const tools = [
{
index: 1,
image: images.tabs.newEnquiryTool,
title: '新建询价',
onPress: () => {
this.props.controlToolVisible(false)
Actions.newEnquiry()
},
},
{
index: 2,
image: images.tabs.purchaseAsstant,
title: '采购助手',
onPress: () => {
Chatlogin().then(data => {
if (data) {
this.props.getAccountInfo(_.get(global.USER_INFO, 'imInfo.mpcAccId'))
.then(chatInfo => {
this.props.controlToolVisible(false)
Actions.chat({
session: {
contactId: 123,
name: '31231',
sessionType: '0'
}
})
})
.catch(console.error)
}
})
},
},
]
|
在 render 函数里我们循环即可实现代码的抽象
1
2
3
4
5
6
7
8
|
{
tools.map((tool) => (
<TouchableOpacity style={styles.toolWrapper} key={tool.index} onPress={tool.onPress} >
<Image source={tool.image} />
<Text style={styles.text}>{tool.title}</Text>
</TouchableOpacity>))
}
|
总结
代码总是可以解决很多问题，在 Coding 时，应该及时重构，将代码中的坏味道及时剔除，为以后业务功能开发解决技术债。
Refs
1.https://guzhongren.github.io/
谷中仁的博客
