时间戳

首页 > 解决方案 > 添加动态背景颜色以从状态反应本机查看

react-native - 添加动态背景颜色以从状态反应本机查看

问题描述

我有一个父视图容器，它具有三个具有不同背景颜色的子视图。我想为视图设置的背景颜色存储为 state 中的值。

我需要实现这样的目标：

在此处输入图像描述

这是我的代码片段：

 this.state={
            myData:[],
            color:["#27AE60", "#3498DB", "#E67E22","#E74C3C","#DAF7A6"]
        }

render(){
const oem_color = this.state.color.map((i,e) => {

            return(
                <View key={i} style={{width:15, height:15, borderRadius:50, backgroundColor: {i.color}}} />
            )
        })

return (    
            <View>
            </View>
       )

请帮忙解决。

标签： react-native

解决方案

另一种方法是使用 Flatlist 只需在 flatlist 的数据中传递此状态

<FlatList 
data={this.state.color} 
renderItem={(item, index) => {
return (
<View
      key={index}
      style={{
        width: 15,
        height: 15,
        borderRadius: 50,
        backgroundColor: item,
      }}
    />
)}}

推荐阅读