Question

对于那些只从事工作的人。将<FlatList>当作.map数组函数，将<View>当作<div>，将<text>当作<p>

所以我在这里映射了很长的数组列表

<FlatList
    data={this.props.cryptoLoaded}
    renderItem={({ item, index }) => (
        <TouchableWithoutFeedback onPress={() => this.touched(this.props.coinShortName)}>
        <View>
            <View style={[upperRow, container1,this.state.increased ? {backgroundColor: "#B4EEB4"} : null,this.state.decreased ? {backgroundColor: "#ffe5e5"} : null]}>
                <Text style={sno}> {index + 1} </Text>                
                <Text style={coinSymbol}>{item["short"]}</Text>
                <Text style={coinPrice}>${item["price"].toFixed(2)}</Text>
                <View style={percentageBox}>
                    <Text style={this.props.percentChange < 0 ? percentChangeMinus : percentChangePlus }>{item["perc"].toFixed(2)}%</Text>
                </View>
            </View>
        </View>
        </TouchableWithoutFeedback>
    )}  
/>

假设此列表包含200个元素，并且我获得了一个新数据（来自socket.io），其中价格已更改(item["price"])，所以当价格下降时，我希望背景为< em> red ，当价格下降和上涨时，我希望背景为绿色

this.updateCoinData = [...this.props.cryptoLoaded];
this.socket.on('trades', (tradeMsg) => {
    for (let i=0; i < 30; i++) {
        if (this.updateCoinData[i]["short"] == tradeMsg.coin ) {
            //Search for changed Crypto Value
            this.updateCoinData[i]["perc"] = tradeMsg["message"]["msg"]["perc"]
            this.updateCoinData[i]["price"] = tradeMsg['message']['msg']['price']

            //Update the crypto Value state in Redux
            this.props.updateCrypto(this.updateCoinData);
        }
    }
})

[问题：] ，实现此目标的最佳方法是什么？

Answer 1

您可以通过在itens中添加两个新属性来实现此目的

this.socket.on('trades', (tradeMsg) => {
    for (let i=0; i < 30; i++) {
        if (this.updateCoinData[i]["short"] == tradeMsg.coin ) {
            //Search for changed Crypto Value
            this.updateCoinData[i]["increased"] = tradeMsg['message']['msg']['price'] > this.updateCoinData[i]["price"]
            this.updateCoinData[i]["decreased"] = tradeMsg['message']['msg']['price'] < this.updateCoinData[i]["price"]
            this.updateCoinData[i]["perc"] = tradeMsg["message"]["msg"]["perc"]
            this.updateCoinData[i]["price"] = tradeMsg['message']['msg']['price']

            //Update the crypto Value state in Redux
            this.props.updateCrypto(this.updateCoinData);
        }
    }
})

在FlatList渲染方法上，应使用item.increased和item.decreased

更新平面列表中的元素（类似于地图方法）

1 个答案: