React Native绝对定位View数组渲染仅显示最后一项问题求助

你遇到的这个问题其实是JavaScript对象引用复用导致的典型坑！

看你的代码，不管是forEach还是map循环里，你都在复用同一个baseStyle对象：

let finalStyle = baseStyle
finalStyle.left = point.x
finalStyle.top = point.y

因为finalStyle只是baseStyle的引用，不是新对象，所以每次循环修改left和top时，都是在修改同一个对象的属性。等到循环结束，所有<View>的style都指向这个被最后一次修改的对象，自然就只会显示最后一个位置的视图了。

解决办法：每次循环创建新的Style对象 #

你只需要保证每个<View>拿到的都是独立的style对象就行，有两种简单的实现方式：

方式1：使用对象展开运算符（推荐）

每次基于baseStyle创建一个全新的对象，再添加位置属性：

render(){
  const pointSize = 30
  const baseStyle = {
    position:'absolute',
    width:pointSize,
    height:pointSize,
    backgroundColor:'yellow',
    borderRadius:pointSize/2
  }
  const points = this.state.data

  return(
    <Container style={{position:'absolute'}}>
      {points.map((point) => {
        // 关键：用展开运算符创建新对象，避免引用复用
        const finalStyle = {
          ...baseStyle,
          left: point.x,
          top: point.y
        }
        const key = `${point.x}_${point.y}`
        return(
          <View style={finalStyle} key={key}>
            <Text>{key}</Text>
          </View>
        )
      })}
    </Container>
  )
}

方式2：使用样式数组合并（和你注释里的写法一致）

利用React Native支持数组样式的特性，把基础样式和位置样式分开：

{points.map((point) => {
  const key = `${point.x}_${point.y}`
  return(
    <View 
      style={[baseStyle, { left: point.x, top: point.y }]} 
      key={key}
    >
      <Text>{key}</Text>
    </View>
  )
})}

两种方式都能解决问题，核心就是让每个<View>的style都是独立的对象，不会被后续循环的修改影响。

内容的提问来源于stack exchange，提问作者Siu Chung Chan