search
HomeWeb Front-endJS TutorialDetailed explanation of React-Native left and right linkage List
Detailed explanation of React-Native left and right linkage List
小云云
小云云
Feb 07, 2018 pm 01:09 PM
listreact-nativeLinkage

This article mainly introduces to you the example code of React-Native left and right linkage List. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

1: Left and right linkage List is very common at work.

Today I will share an example written by a colleague. I only made simple modifications.

Note: This example must modify the source code, refer to Article 3 of this article.

二：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 ? &#39;white&#39; : 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:&#39;#DEDEDE&#39;,justifyContent:&#39;center&#39;,alignItems:&#39;center&#39;}}>
        <Text >{section.section.section}</Text>
      </View>
    )
  };

  separator = () => {
    return (
      <View style={{height:1,backgroundColor:&#39;gray&#39;}}/>
    )
  };

  render() {
    return (
      <View style={ styles.container }>
        <FlatList
          ref=&#39;FlatList&#39;
          style={ styles.leftList }
          data={ ParcelData }
          renderItem={(item) => this.renderLRow(item)}
          ItemSeparatorComponent={ () => this.separator() }
          keyExtractor={ (item) => item.section }
        />
        <SectionList
          ref=&#39;sectionList&#39;
          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 : &#39;row&#39;
  },
  leftList : {
    width : 1 * width / 4,
    backgroundColor : &#39;#E9E9EF&#39;
  },
  lItem : {
    minHeight : 44,
    justifyContent : &#39;center&#39;,
  },
  lText : {
    marginLeft : 10,
    marginRight : 10,
    fontSize : 16,
  },
  rightList : {
    width : 3 * width / 4
  },
  rItem : {
    flexDirection : &#39;row&#39;
  },
  rItemDetail : {
    flex : 1,
    marginTop : 10,
    marginLeft : 5
  },
  icon : {
    height : 60,
    width : 60,
    marginTop : 10,
    marginBottom : 10,
    marginLeft : 8,
    borderWidth : 1,
    borderColor : &#39;#999999&#39;
  },
  foodName : {
    fontSize : 18,
  },
  saleFavorite : {
    flexDirection : &#39;row&#39;,
    marginTop : 5,
    marginBottom : 5,
  },
  saleFavoriteText : {
    fontSize : 13,
  },
  moneyText : {
    color : &#39;orange&#39;
  },
});

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"
   }
  ]
 }
]

Three: Modify the source code

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


The path is in node_modules/react-native/Libraries/Lists/VirtualizedSectionList.js, about line 253, and is modified as follows: 


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);
  }

Four:


1-: Code github address: https://github.com/erhutime/React-Navigation-All


2 -: After the download is completed, modify the index.ios.js: entry file as follows: 


import App from &#39;./jscode/doubleList/App&#39;
AppRegistry.registerComponent(&#39;All&#39;, () => App);

5: The rendering is as follows:

Related recommendations:


Detailed explanation of the use of each and list in PHP

Detailed explanation of IndexList on the mobile terminal

Introduction to the effect of IndexList on mobile

The above is the detailed content of Detailed explanation of React-Native left and right linkage List. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Related Article
react native怎么更改版本react native怎么更改版本Jan 19, 2023 pm 02:31 PM

react native更改版本的方法：1、进入React Native项目目录，命令行输入“react-native --version”；2、查看npm包管理的React Native版本；3、打开项目中的“package.json”文件，修改dependencies字段，把“react-native”版本修改为目标版本即可。

php如何实现Redis的List操作php如何实现Redis的List操作May 26, 2023 am 11:51 AM

List操作//从list头部插入一个值。$ret=$redis->lPush(&#39;city&#39;,&#39;guangzhou&#39;);//从list尾部插入一个值。$ret=$redis->rPush(&#39;city&#39;,&#39;guangzhou&#39;);//获取列表指定区间中的元素。0表示列表第一个元素，-1表示最后一个元素，-2表示倒数第二个元素。$ret=$redis->l

java中JSONArray互相转换List怎么实现java中JSONArray互相转换List怎么实现May 04, 2023 pm 05:25 PM

1：JSONArray转ListJSONArray字符串转List//初始化JSONArrayJSONArrayarray=newJSONArray();array.add(0,"a");array.add(1,"b");array.add(2,"c");Listlist=JSONObject.parseArray(array.toJSONString(),String.class);System.out.println(list.to

Java开发表单字段的联动与依赖功能Java开发表单字段的联动与依赖功能Aug 07, 2023 am 08:41 AM

Java开发表单字段的联动与依赖功能引言：在Web开发中，表单是经常使用到的一种交互方式，用户可以通过表单填写信息并提交，而繁琐、冗余的表单字段选择操作往往会给用户带来不便。因此，表单字段的联动和依赖功能被广泛应用于提升用户体验和操作效率。本文将介绍如何使用Java开发实现表单字段的联动和依赖功能，并提供相应的代码示例。一、表单字段联动功能的实现表单

为什么在Python中list.sort()不会返回已排序的列表？为什么在Python中list.sort()不会返回已排序的列表？Sep 18, 2023 am 09:29 AM

示例在这个例子中，我们先看看list.sort()的用法，然后再继续。在这里，我们创建了一个列表并使用sort()方法按升序排序-#CreatingaListmyList=["Jacob","Harry","Mark","Anthony"]#DisplayingtheListprint("List=",myList)#SorttheListsinAscendingOrdermyList.sort(

如何使用C#中的List.Sort函数对列表进行排序如何使用C#中的List.Sort函数对列表进行排序Nov 17, 2023 am 10:58 AM

如何使用C#中的List.Sort函数对列表进行排序在C#编程语言中，我们经常需要对列表进行排序操作。而List类的Sort函数正是为此设计的一个强大工具。本文将介绍如何使用C#中的List.Sort函数对列表进行排序，并提供具体的代码示例，帮助读者更好地理解和应用该函数。List.Sort函数是List类的一个成员函数，用于对列表中的元素进行排序。该函数接

Java中如何将数组转换为ListJava中如何将数组转换为ListApr 19, 2023 am 09:13 AM

一.最常见方式(未必最佳)通过Arrays.asList(strArray)方式,将数组转换List后，不能对List增删，只能查改，否则抛异常。关键代码：Listlist=Arrays.asList(strArray);privatevoidtestArrayCastToListError(){String[]strArray=newString[2];Listlist=Arrays.asList(strArray);//对转换后的list插入一条数据list.add("1"

Java基础中List常用方法是什么Java基础中List常用方法是什么May 14, 2023 am 10:16 AM

一、List接口简介List是一个有序的集合、可重复的集合。它是继承Collection接口，在List集合中是可以出现重复的元素，可以通过索引(下标)来访问指定位置的元素。二、List常用方法&mdash;&mdash;voidadd(intindex,Obejctelement)方法1.voidadd(intindex,Obejctelement)方法是把element元素插入在指定位置，后面的元素往后移一个元素。2.voidadd(intindex,Obejctelemen

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Show More

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
How Long Does It Take To Beat Split Fiction?
1 months agoByDDD
R.E.P.O. Save File Location: Where Is It & How to Protect It?
1 months agoByDDD
R.E.P.O. Best Graphic Settings
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Assassin's Creed Shadows: Seashell Riddle Solution
1 weeks agoByDDD
Show More

Hot Tools

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

Show More

Hot Topics

Where is the login entrance for gmail email?
7396
15
Java Tutorial
1630
14
CakePHP Tutorial
1358
52
Laravel Tutorial
1268
25
PHP Tutorial
1217
29
Show More