React-Native左右联动List的示例代码

程序员文章站 2022-03-27 08:21:02

一：左右联动list,在工作中很常见。今天分享一个同事写的例子，本人只做了简单修改。注意：本例子必须修改源码，参考本文第三条。二：coding p...

一：左右联动list,在工作中很常见。

今天分享一个同事写的例子，本人只做了简单修改。

注意：本例子必须修改源码，参考本文第三条。

二：coding

parcelpage.js:

import react, { component } from 'react';
import {
  appregistry,
  stylesheet,
  text,
  view,
  flatlist,
  sectionlist,
  dimensions,
  touchableopacity,
  image,
} from 'react-native';

import parceldata from './parceldata.json'

var { width, height } = dimensions.get('window');

let headers = [];


export default class parcelpage extends component {

  static navigationoptions = ({ navigation }) => ({
    headertitle : '联动list',
  });

  componentdidmount() {
    parceldata.map((item, i) => {
      headers.push(item.section);
    });
  };

  componentwillunmount() {
    headers = [];
  };

  renderlrow = (item) => {
    return (
      <touchableopacity style={[ styles.litem, {backgroundcolor: item.index == this.state.cell ? 'white' : null} ]}
               onpress={()=>this.cellaction(item)}>
        <text style={styles.ltext}>{ item.item.section }</text>
      </touchableopacity>
    )
  };

  cellaction = (item) => {
    if (item.index <= parceldata.length) {
      this.setstate({
        cell : item.index
      });
      if (item.index > 0) {
        var count = 0;
        for (var i = 0;
          i < item.index;
          i++) {
          count += parceldata[ i ].data.length + 1
        }
        this.refs.sectionlist.scrolltoindex({ animated : false, index : count })
      } else {
        this.refs.sectionlist.scrolltoindex({ animated : false, index : 0 });
      }

    }

  };

  itemchange = (info) => {
    let section = info.viewableitems[ 0 ].section.section;
    if (section) {
      let index = headers.indexof(section);
      if (index < 0) {
        index = 0;
      }
      this.setstate({ cell : index });
    }
  };

  state = {
    cell : 0
  };

  renderrrow = (item) => {
    return (
      <view style={ styles.ritem }>
        <image style={ styles.icon } source={{ uri : item.item.img }}/>
        <view style={ styles.ritemdetail }>
          <text style={ styles.foodname }>{ item.item.name }</text>
          <view style={ styles.salefavorite }>
            <text style={ styles.salefavoritetext }>{ item.item.sale }</text>
            <text style={ [styles.salefavoritetext,{ marginleft:15 }]}>{ item.item.favorite }</text>
          </view>
          <text style={ styles.moneytext }>￥{ item.item.money }</text>
        </view>
      </view>
    )
  };

  sectioncomp = (section) => {
    return (
      <view style={{height:30,backgroundcolor:'#dedede',justifycontent:'center',alignitems:'center'}}>
        <text >{section.section.section}</text>
      </view>
    )
  };

  separator = () => {
    return (
      <view style={{height:1,backgroundcolor:'gray'}}/>
    )
  };

  render() {
    return (
      <view style={ styles.container }>
        <flatlist
          ref='flatlist'
          style={ styles.leftlist }
          data={ parceldata }
          renderitem={(item) => this.renderlrow(item)}
          itemseparatorcomponent={ () => this.separator() }
          keyextractor={ (item) => item.section }
        />
        <sectionlist
          ref='sectionlist'
          style={ styles.rightlist }
          rendersectionheader={ (section) => this.sectioncomp(section) }
          renderitem={ (item) => this.renderrrow(item) }
          sections={ parceldata }
          keyextractor={ (item) => item.name }
          onviewableitemschanged={ (info) => this.itemchange(info) }
        />
      </view>
    );
  }
}

const styles = stylesheet.create({
  container : {
    flexdirection : 'row'
  },
  leftlist : {
    width : 1 * width / 4,
    backgroundcolor : '#e9e9ef'
  },
  litem : {
    minheight : 44,
    justifycontent : 'center',
  },
  ltext : {
    marginleft : 10,
    marginright : 10,
    fontsize : 16,
  },
  rightlist : {
    width : 3 * width / 4
  },
  ritem : {
    flexdirection : 'row'
  },
  ritemdetail : {
    flex : 1,
    margintop : 10,
    marginleft : 5
  },
  icon : {
    height : 60,
    width : 60,
    margintop : 10,
    marginbottom : 10,
    marginleft : 8,
    borderwidth : 1,
    bordercolor : '#999999'
  },
  foodname : {
    fontsize : 18,
  },
  salefavorite : {
    flexdirection : 'row',
    margintop : 5,
    marginbottom : 5,
  },
  salefavoritetext : {
    fontsize : 13,
  },
  moneytext : {
    color : 'orange'
  },
});

parceldata.js

[
 {
  "section" : "热销",
  "data" : [
   {
    "name" : "蟹黄汤包",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "20",
    "img":"http://p1.meituan.net/deal/__39230311__3449301.jpg"
   },
   {
    "name" : "小馄饨",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p1.meituan.net/deal/849d8b59a2d9cc5864d65784dfd6fdc6105232.jpg"
   },
   {
    "name" : "蟹黄汤包+牛杂粉丝汤套餐",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "35",
    "img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
   },
   {
    "name" : "鸭血粉丝汤",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "15",
    "img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
   }
  ]
 },
 {
  "section" : "介绍我们",
  "data" : [
   {
    "name" : "慎用差评！任何问题联系我们就可解决哦",
    "sale" : "月售1",
    "favorite" : "赞0",
    "money" : "0",
    "img":"http://p1.meituan.net/deal/__39230311__3449301.jpg"
   }
  ]
 },
 {
  "section" : "折扣套餐",
  "data" : [
   {
    "name" : "特色蟹黄汤包+鸭血粉丝汤+果汁套餐",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "50",
    "img":"http://p1.meituan.net/deal/__39230311__3449301.jpg"
   },
   {
    "name" : "蟹黄汤包+牛杂粉丝汤套餐",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "35",
    "img":"http://p1.meituan.net/deal/849d8b59a2d9cc5864d65784dfd6fdc6105232.jpg"
   },
   {
    "name" : "蟹黄汤包+南瓜粥+果汁套餐",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
   },
   {
    "name" : "金牌蟹黄汤包+紫米粥+柠檬果汁套餐",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
   },
   {
    "name" : "台式卤肉饭+南瓜粥套餐",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
   }
  ]
 },
 {
  "section" : "纯手工汤宝",
  "data" : [
   {
    "name" : "金牌蟹黄汤包",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p1.meituan.net/deal/__39230311__3449301.jpg"
   },
   {
    "name" : "蟹庭丰特色蟹黄汤包",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p1.meituan.net/deal/849d8b59a2d9cc5864d65784dfd6fdc6105232.jpg"
   },
   {
    "name" : "蟹黄汤包",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
   },
   {
    "name" : "干贝汤包",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
   },
   {
    "name" : "鲍鱼汤包",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
   },
   {
    "name" : "全家福汤包",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
   },
   {
    "name" : "虾仁汤包",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
   }
  ]
 },
 {
  "section" : "汤、粥类",
  "data" : [
   {
    "name" : "紫米粥",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p1.meituan.net/deal/__39230311__3449301.jpg"
   },
   {
    "name" : "金丝南瓜粥",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p1.meituan.net/deal/849d8b59a2d9cc5864d65784dfd6fdc6105232.jpg"
   },
   {
    "name" : "小米粥",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
   },
   {
    "name" : "白粥",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
   }
  ]
 },
 {
  "section" : "面食类",
  "data" : [
   {
    "name" : "鸡汤面",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p1.meituan.net/deal/__39230311__3449301.jpg"
   },
   {
    "name" : "红烧小排面",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p1.meituan.net/deal/849d8b59a2d9cc5864d65784dfd6fdc6105232.jpg"
   },
   {
    "name" : "红烧牛肉面",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
   }
  ]
 },
 {
  "section" : "调味小菜",
  "data" : [
   {
    "name" : "肉松",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p1.meituan.net/deal/__39230311__3449301.jpg"
   },
   {
    "name" : "辣椒包",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p1.meituan.net/deal/849d8b59a2d9cc5864d65784dfd6fdc6105232.jpg"
   },
   {
    "name" : "泡菜",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
   },
   {
    "name" : "酱黄瓜",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
   },
   {
    "name" : "萝卜干",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
   }
  ]
 },
 {
  "section" : "饮料",
  "data" : [
   {
    "name" : "可乐",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p1.meituan.net/deal/__39230311__3449301.jpg"
   },
   {
    "name" : "雪碧",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p1.meituan.net/deal/849d8b59a2d9cc5864d65784dfd6fdc6105232.jpg"
   },
   {
    "name" : "王老吉",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
   },
   {
    "name" : "橙汁",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
   }
  ]
 }
]

三：修改源码

1-:sectionlist

node_modules/react-native/libraries/lists/sectionlist.js,代码格式化后大概在187行的位置，修改如下

 class sectionlist<sectiont: sectionbase<any>>
  extends react.purecomponent<defaultprops, props<sectiont>, void> {
  props: props<sectiont>;
  static defaultprops: defaultprops = defaultprops;

  render() {
    const list = this.props.legacyimplementation ? metrolistview : virtualizedsectionlist;
    return <list
      ref={this._captureref}
      {...this.props} />;
  }

  _captureref = (ref) => {
    this._listref = ref;
  };

  scrolltoindex = (params: { animated?: ?boolean, index: number, viewposition?: number }) => {
    this._listref.scrolltoindex(params);
  }
}

2-:virtualizedsectionlist

路径在node_modules/react-native/libraries/lists/virtualizedsectionlist.js，大概253行处修改如下：

render() {
    return <virtualizedlist
      ref={this._captureref}
      {...this.state.childprops} />;
  }

  _captureref = (ref) => {
    this._listref = ref;
  };

  scrolltoindex = (params: { animated?: ?boolean, index: number, viewposition?: number }) => {
    this._listref.scrolltoindex(params);
  }

四：

1-：代码github地址：https://github.com/erhutime/react-navigation-all

2-：下载完成后，修改index.ios.js:入口文件如下：

import app from './jscode/doublelist/app'
appregistry.registercomponent('all', () => app);

五：效果图如下：

React-Native左右联动List的示例代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： js 中rewrap-ajax.js插件实例代码

下一篇：淘宝中小卖家如何全面布局内容营销，让店铺有一个更好的发展前景

React-Native左右联动List的示例代码

微信小程序实现卡片左右滑动效果的示例代码

使用vue.js实现联动效果的示例代码

django admin 后台实现三级联动的示例代码

react-native 圆弧拖动进度条实现的示例代码

用vue的双向绑定简单实现一个todo-list的示例代码

React-Native中禁用Navigator手势返回的示例代码

react-native 完整实现登录功能的示例代码

Vue配合iView实现省市二级联动的示例代码

Django Admin实现三级联动的示例代码(省市区)

Angularjs实现下拉框联动的示例代码