Question

    <FlatList
         data={this.state.bankDetail}
         renderItem={({ item, index }) => this.bankImgView(item, index)}
         keyExtractor={(item, index) => index}
         horizontal={false}
         numColumns={4} 
    />



    bankImgView(item, index) {

            return (
                <TouchableOpacity onPress={() => this.selectBank(item.image, item.text, index)}>
                    <View ref={"img"+index} style={{ backgroundColor:  "white", marginTop: 2.5, justifyContent: "center", marginLeft: 6, alignItems: "center", flex: 1, marginBottom: 2.5 }}>
                        <View  style={{ width: width / 4 - 8, height: 90, justifyContent: "center", alignItems: "center" }}>
                            <Image source={{ uri:item.image }} style={{ height: 60, width: 60 }} />
                        </View>
                    </View>
                </TouchableOpacity>
            )
        }


    selectBank(bankImage,bankName,index) {
           this.refs["img"+index].setNativeProps({ backgroundColor: "red" });
        }

我想使用flatList中的setNativeProps更改视图的背景颜色但是没有更改，错误遇到＆＃34; setNativeProps of undefined＆＃34;。所以请提供正确的方法来执行此操作。< / p>

Answer 1

将selectBank功能更改为

selectBank = (bankImage,bankName,index) => {
    this.refs["img"+index].setNativeProps({ backgroundColor: "red" });
}

您正在访问更改this并且this.refs["img"+index]未定义的函数中的引用。

因此，相应地将其更改为es6，以便this自动绑定。

使用SetNativeProps更改FlatList中的行样式

1 个答案: