Question

我有一个父视图容器，该容器具有三个具有不同背景颜色的子视图。我要设置为视图的背景色以状态值的形式存储。

我需要实现以下目标：

这是我的代码段：

 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>
       )

请帮助解决它。

Answer 1

颜色是不是对象的字符串颜色的数组，您不必执行i.color

const oem_color = this.state.color.map((color, e) => {
  return (
    <View
      key={color}
      style={{
        width: 15,
        height: 15,
        borderRadius: 50,
        backgroundColor: color,
      }}
    />
  );
});

Answer 2

实现此目的的另一种方法是使用Flatlist，只需将此状态传递到Flatlist数据中

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

Answer 3

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>
)

样式中不需要弯括号，并且 array 不是对象的数组，因此 i.color 将是未定义的，请检查您在下面重组了代码

state = {
  myData: [],
  color: ['#27AE60', '#3498DB', '#E67E22', '#E74C3C', '#DAF7A6'],
};

render() {
  const oem_color = this.state.color.map((color, index) => (
    <View
      key={i}
      style={{
        width: 15,
        height: 15,
        borderRadius: 50,
        backgroundColor: color,
      }}
    />
  ));
  return <View>{oem_color}</View>;
}

添加动态背景色以从状态本机查看

3 个答案: