zoukankan      html  css  js  c++  java
  • 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>

    —— 完 ——

  • 相关阅读:
    nginx 安装配置
    mysql分表
    冲刺day7
    冲刺day6
    冲刺day5
    冲刺day4
    冲刺day3
    冲刺day2
    冲刺day1
    撰写《需求规格说明书》的工作流程、组员分工和组员工作量比例
  • 原文地址:https://www.cnblogs.com/bbcfive/p/10889236.html
Copyright © 2011-2022 走看看