Javascript 对列表中的项目更改视图的背景色

我有颜色和4个视图容器的列表。我在第四个

视图
容器中通过
Flatlist
显示listy中的项目。我想更改我单击的颜色列表中颜色上第四个视图容器的背景色。我有
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>
        );
    }
}


const colorList=[
{键：'1'，值：'blueviolet'}，
{键：'2'，值：'Chartrese'}，
{键：'3'，值：'cyan'}，
{键：'4'，值：'darggrey'}，
{键：'5'，值：'gold'}，
{键：“6”，值：“卡其色”}，
{键：'7'，值：'lawngreen'}，
{键：'8'，值：'orange'}，
{key:'9'，value:'palevioletred'}，
{键：'10'，值：'yellow'}，
];
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={clicks:0，color:'blue'，changeBackgroundColor:'green'，changeBackgroundColorList:'green'}；
}
increase=此.increase.bind（此）
decrease=this.decrease.bind（this）
增加{
this.setState（{color:'white'}）；
this.setState（previousState=>（{clicks:previousState.clicks+1}））；
} 
减少{
this.setState（{color:'white'}）；
如果（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.keys（Object.find）（key=>Object[key]==value）；
}
onClickList=this.onClickList.bind（this）；
点击列表（项目）{
警报。警报（项。键）
this.setState（{changeBackgroundColorList:colorList[item.key].value}）；
}
render（）{
返回(
{“\n”}
克里卡茨
Liczba-klikniec:{this.state.clicks}
{“\n”}
{“\t”}
Zmien tlo
{item.value}
/>
);
}
}
试试这个

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>}
/>

onClickList=（索引）=>{
Alert.Alert（颜色列表[index].key）
this.setState（{changeBackgroundColorList:colorList[index].value}）；
}
this.onClickList（index）}>{item.value}
/>