React Native数组的绝对位置视图

Question

我想用绝对位置渲染“Star”数组到视图。当我将它们1加1.它工作正常，但当我将它们添加为数组时，它只显示数组中的最后一个视图

   render(){

        const pointSize = 30
        let pointViews = []
        let baseStyle = {position:'absolute',width:pointSize,height:pointSize,backgroundColor:'yellow',borderRadius:pointSize/2}

        console.log("render ");

        let points = this.state.data

        this.state.data.forEach(function(point){
            console.log("for: "+JSON.stringify(point));
            let finalStyle = baseStyle
            finalStyle.left = point.x
            finalStyle.top = point.y

            let key = point.x+"_"+point.y

            let pointView = <View style={finalStyle} key={key}><Text>{key}</Text></View>
            pointViews.push(pointView)
        })

        console.log("pointViewss: "+pointViews)

        return(
            <Container style={{position:'absolute'}}>
                {points.map((point,key) => {

                    let finalStyle = baseStyle
                    finalStyle.left = point.x
                    finalStyle.top = point.y
                    return(
                        <View style={finalStyle} key={key}><Text>{key}</Text></View>
                    )
                })}
                {/*<View style={[baseStyle,{left:10,top:10}]}></View>*/}
                {/*<View style={[baseStyle,{left:50,top:50}]}></View>*/}
                {/*<View style={[baseStyle,{left:100,top:100}]}></View>*/}
            </Container>
        )
    }

它显示了什么

我想要什么

Answer 1

在这里

constructor(props){
    super(props)
    this.state= {
      data: [
        {x: 10, y:10},
        { x: 50, y: 50 },
        { x: 100, y: 100 }
      ]
    }
  }
  render() {
    const pointSize = 30
    let pointViews = []
    let baseStyle = { position: 'absolute', width: pointSize, height: pointSize, backgroundColor: 'yellow', borderRadius: pointSize / 2 }
    return (
      <View style={{position: 'absolute'}}>
        {
          this.state.data.map((point, key) => {
            return (
              <View style={{ ...baseStyle, left: point.x, top: point.y }} key={key}><Text>{key}</Text></View>
            )
          })
        }
      </View>
    )
  }

我希望它足够清楚：）