社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
首頁 web前端 js教程 詳解React-Native左右連動List

詳解React-Native左右連動List

小云云
小云云
Feb 07, 2018 pm 01:09 PM
list react-native 聯動

本文主要跟大家介紹React-Native左右連動List的範例程式碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

一：左右連動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 ? &#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"
   }
  ]
 }
]
登入後複製

三：修改原始碼

#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 &#39;./jscode/doubleList/App&#39;
AppRegistry.registerComponent(&#39;All&#39;, () => App);
登入後複製
五：效果圖如下：


相關推薦：

詳解PHP中each與list的使用

關於行動端IndexList詳解

# ######行動端IndexList效果介紹######

以上是詳解React-Native左右連動List的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

如何修復KB5055523無法在Windows 11中安裝？
3 週前 By DDD
如何修復KB5055518無法在Windows 10中安裝？
3 週前 By DDD
<🎜>：死鐵路 - 如何馴服狼
4 週前 By DDD
R.E.P.O.的每個敵人和怪物的力量水平
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
<🎜>：種植花園 - 完整的突變指南
2 週前 By DDD
顯示更多

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

Java教學
1662
14
CakePHP 教程
1418
52
Laravel 教程
1311
25
PHP教程
1261
29
C# 教程
1234
24
顯示更多
Related knowledge
旅程IPx經典動畫《西遊記》 西行旅程無畏無懼 旅程IPx經典動畫《西遊記》 西行旅程無畏無懼 Jun 10, 2024 pm 06:15 PM

穿越蒼茫征途，踏足西遊之境！今日，征途IP正式宣布將與央視動畫《西遊記》展開跨界合作，共同打造一場融合了傳統與創新的文化盛宴！此次攜手，不僅標誌著兩大國產經典品牌的深度合作，更彰顯了征途系列在弘揚中國傳統文化道路上的不懈努力與堅持。征途系列自誕生以來，便憑藉其深厚的文化底蘊和多元化的遊戲玩法，受到玩家們的喜愛。在文化傳承方面，征途系列更是始終保持著對中國傳統文化的敬意與熱愛，將傳統文化元素巧妙地融入遊戲，為玩家們帶來了更多的樂趣與啟發。而央視動畫《西遊記》則是陪伴了一代又一代人成長的經典之作，其

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」版本修改為目標版本即可。

炸雞大業，不容差池！ 《逆水寒》聯動肯德基福上天，玩家社死'聞雞起舞” 炸雞大業，不容差池！ 《逆水寒》聯動肯德基福上天，玩家社死'聞雞起舞” Apr 17, 2024 pm 06:34 PM

日期，《逆水寒》官宣將於4月19號-5月12號與肯德基展開聯動，但聯動的具體內容卻讓許多人蚌埠住了，連番直說「民上天了」、「要社死了」！原因就出在這次主題活動的口號上，曾經見識過《原神》《崩鐵》肯德基聯動的小伙伴肯定有印象，什麼“異世相遇、盡享美味”，到了《逆水寒》這裡就成了：對店員喊出「神候府查案，爾等何人?」店員需回答「炸雞大業，不容差池!」對員工的訓練指南：絕對不能笑！不只這個，這次聯動還辦起了舞蹈大賽，到主題店做出「聞『基』起舞」舞蹈動作，還能獲得一個搖搖樂小立牌。民，太民了！但就是要這

雙廚狂喜！ 《陰陽師》X《初音未來》連動3月6日開啟 雙廚狂喜！ 《陰陽師》X《初音未來》連動3月6日開啟 Feb 22, 2024 pm 06:52 PM

網易《陰陽師》手遊在今日宣布，陰陽師×初音未來限定連動將於3月6日正式開始。連動限定SSR初音未來（CV：藤田咲）、SSR鏡音鈴連（CV：下田麻美）即將降臨平安京！連動線上特別演出活動3月9日於遊戲內正式開啟~

經典重聚，逆轉時空《天龍2》X《大話西遊》電影連結決定 經典重聚，逆轉時空《天龍2》X《大話西遊》電影連結決定 Mar 28, 2024 pm 04:40 PM

經典重聚，逆轉時空。 《天龍2》手遊與經典電影《大話西遊》攜手定檔4月11日!恰逢《天龍2》手遊週年慶典，邀請大家共同重溫經典回憶，再次見證至尊寶與紫霞至死不渝的傳奇故事。七彩祥雲要有，金甲聖衣也要有當那句「般若波羅蜜」迴盪在耳邊時，你是否會想起紫霞留在至尊寶心底的那一滴眼淚?一眼萬年，卻難逃宿命之劫。縱使萬劫不復，吾愛至死不渝。大話西遊連結外觀【一眼萬年】【天意】將隨週年慶版本同步上線。願你可以身披金甲聖衣又或可以邂逅自己的蓋世英雄，重回至情至性的青春年少。五百年守護，真愛至死不渝那日偶遇洛陽說

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

List操作//從list頭部插入一個值。 $ret=$redis->lPush('city','guangzhou');//從list尾部插入一個值。 $ret=$redis->rPush('city','guangzhou');//取得清單指定區間中的元素。 0表示列表第一個元素，-1表示最後一個元素，-2表示倒數第二個元素。 $ret=$redis->l

《暗黑破壞神：不朽》X《仙劍奇俠傳》聯動決定！ 《暗黑破壞神：不朽》X《仙劍奇俠傳》聯動決定！ Apr 17, 2024 pm 02:58 PM

網易遊戲在今天宣布，《暗黑破壞神：不朽》決定聯動《仙劍奇俠傳》。 4月24日「一劍逍遙」開啟不朽修仙新時代！一個是西方魔幻的經典之作，一個是東方仙俠的永恆回憶，暗黑宇宙與仙劍江湖時空交錯，兩大IP攜手斬妖除魔。 4月24日，關於正義與俠道的不滅傳說將在庇護之地上演！

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

See all articles