0
嘿,大家可以有人幫我解決這個問題。我的問題與改進應用程序的用戶體驗有關。我已經通過一個循環呈現手風琴,它使用一個按鈕呈現數據。我想改變按下的按鈕的顏色,從而幫助用戶體驗。但隨着所有按鈕都在變色,都會遇到問題。問題是我從狀態渲染顏色任何人都可以幫助我解決一些不同的問題。如何更改通過循環呈現的按鈕上按鈕的設計(例如顏色)?
這是遍歷對此我渲染手風琴:
{this.state.services.map((tab, i) => {
return(
<ScrollView key={i} tabLabel={tab.category} style={{flex: 1}}>
{tab.names.map((name, j) => this.renderRow(name))}
</ScrollView>
)
})}
這是渲染功能:
renderRow (rowData) {
var header = (
rowData.subGroup.length > 1 ? <View>
<Text>{rowData.name}</Text>
</View>
:
<View>
<View style={{flex: 1}}>
<Text>{rowData.name}</Text>
<Text>{rowData.subGroup[0].duration}Min</Text>
</View>
<Text>₹{rowData.subGroup[0].price.M ? rowData.subGroup[0].price.M : rowData.subGroup[0].price.F}</Text>
<TouchableOpacity onPress={() => this._add(rowData.subGroup[0])}>
<View style={styles.buttonView}>
<Text style={styles.buttonText}>ADD</Text>
</View>
</TouchableOpacity>
</View>
);
var content = (
<View style={{flex: 1}}>
{rowData.subGroup.map((sg, i) => {
return(
sg.subGroup ? <View>
<View style={{flex: 1}}>
<Text>{sg.subGroup ? sg.subGroup : sg.name}</Text>
<Text>{sg.duration}Min</Text>
</View>
<Text style={styles.price}>₹{sg.price.M ? sg.price.M : sg.price.F}</Text>
<TouchableOpacity onPress={() => this._add(sg)}>
<View style={styles.buttonView}>
<Text style={styles.buttonText}>ADD</Text>
</View>
</TouchableOpacity>
</View>
:
<View></View>
)
})}
</View>
);
return (
<Accordion
key={rowData.name}
header={header}
content={content}
easing="easeOutCubic"
/>
);
}
有誰能夠引導我通過不同的方法?