[英]React native change background color of View on item from list
I have the list with colors and 4 View container.我有带有颜色和 4 个视图容器的列表。 I'm displaying items from listy in the 4th
View
container by Flatlist
.我在第4个显示来自listy项目
View
集装箱Flatlist
。 I want to change the background color of 4th View container on color from colorList which I was clicked.我想从我单击的 colorList 中更改第 4 个视图容器的背景颜色。 I have
onClickList
function, but I don't know how to get item.key
and pass to onClickList
function.我有
onClickList
功能,但我不知道怎么去item.key
,并传递给onClickList
功能。
const colorList = [
{ key: '1', value: 'blueviolet' },
{ key: '2', value: 'chartreuse' },
{ key: '3', value: 'cyan' },
{ key: '4', value: 'darggrey' },
{ key: '5', value: 'gold' },
{ key: '6', value: 'khaki' },
{ key: '7', value: 'lawngreen' },
{ key: '8', value: 'orange' },
{ key: '9', value: 'palevioletred' },
{ key: '10', value: 'yellow' },
];
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { clicks: 0, color: 'blue', changeBackgroundColor: 'green', changeBackgroundColorList: 'green'};
}
increase = this.increase.bind(this)
decrease = this.decrease.bind(this)
increase() {
this.setState({ color: 'white' });
this.setState(previousState => ({ clicks: previousState.clicks + 1 }));
}
decrease() {
this.setState({ color: 'white' });
if (this.state.clicks > 0)
this.setState(previousState => ({ clicks: previousState.clicks - 1 }));
}
onLongClick = this.onLongClick.bind(this);
onClick = this.onClick.bind(this);
onLongClick() {
this.setState({ changeBackgroundColor: 'white' });
}
onClick() {
var randomColor = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
this.setState({ changeBackgroundColor: randomColor });
}
getKeyByValue = this.getKeyByValue.bind(this)
getKeyByValue(object, value) {
return Object.keys(object).find(key => object[key] === value);
}
onClickList = this.onClickList.bind(this);
onClickList(item) {
Alert.alert(item.key)
this.setState({ changeBackgroundColorList: colorList[item.key].value });
}
render() {
return (
<View style={{ flex: 1 }}>
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>{"\n"}</Text>
<Text style={styles.header}>Klikacz</Text>
</View>
<View style={{ flex: 3, justifyContent: 'center' }}>
<Text style={styles.counter}>Liczba klikniec: {this.state.clicks}</Text>
<Text>{"\n"}</Text>
<View style={styles.buttons}>
<Button title="Dodaj" onPress={this.increase} />
<Text>{"\t"}</Text>
<Button title="Odejmij" onPress={this.decrease} />
</View>
</View>
<View style={{ flex: 3, justifyContent: 'center', alignItems: 'center', backgroundColor: this.state.changeBackgroundColor }}>
<TouchableOpacity onPress={this.onClick} onLongPress={this.onLongClick}>
<Text>
<Text style={styles.changeText}>Zmien tlo</Text>
</Text>
</TouchableOpacity>
</View>
<View style={{ flex: 2, justifyContent: 'center', alignItems: 'center', backgroundColor: this.state.changeBackgroundColorList }}>
<FlatList
data={colorList}
renderItem={({ item }) =>
<Text style={styles.item} onPress={selectColor.bind(this, item)}>{item.value}</Text>}
/>
</View>
</View>
);
}
}
Try this尝试这个
onClickList = (index) => {
Alert.alert(colorList[index].key)
this.setState({ changeBackgroundColorList: colorList[index].value });
}
<FlatList
data={colorList}
renderItem={({ item, index }) =>
<Text style={styles.item} onPress={() => this.onClickList(index)}>{item.value}</Text>}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.