Tips——RN如何動態地添加刪除組件

一、需求 

點擊時動態地創建或刪除組件

二、問題

RN是通過state更新頁面，沒有dom那一套直接添加節點的api

三、解決

通過數組的增刪改查對動態地改變state，以達到創建或刪除組件的效果

添加image：

//add imgItem
imgArr.push(
  <ImgItem 
    key={ imgNum } 
    componentId={ imgNum } 
    time={ now } 
    avatarSource={ source } 
    getDeleteId={ this.getDeleteId }
  />
);
imgNum++;

this.setState({
  imgList: imgArr 
});

刪除image：

getDeleteId = deleteId => {
  // delete imgItem
  var itemIndex = imgArr.filter((item, index) => {
    if(item.props.componentId == deleteId) {
      return index;
    } 
  });
  imgArr = imgArr.slice(0, itemIndex).concat(imgArr.slice(itemIndex + 1));
  
  this.setState({ imgList: imgArr });
}  

展示image：

<View style={{ flex: 8.5 }}>
  {this.state.imgList}
</View>

 

—— 完 ——