一:左右联动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 "htmlcode">[ { "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 "htmlcode">render() { return <VirtualizedList ref={this._captureRef} {...this.state.childProps} />; } _captureRef = (ref) => { this._listRef = ref; }; scrollToIndex = (params: { animated"_blank" href="https://github.com/erhutime/React-Navigation-All" rel="external nofollow" >https://github.com/erhutime/React-Navigation-All
2-:下载完成后,修改index.ios.js:入口文件如下:
import App from './jscode/doubleList/App' AppRegistry.registerComponent('All', () => App);五:效果图如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“React-Native左右联动List的示例代码”评论...
更新动态
2024年05月10日
2024年05月10日
- 群星《妖神令 影视原声专辑》[320K/MP3][85.23MB]
- 逆水寒手游五子棋第二十三关怎么过 逆水寒手游残局攻略大全
- 逆水寒手游五子棋第二十二关怎么过 逆水寒手游残局攻略大全
- 欢乐钓鱼大师最稀有的鱼是什么 欢乐钓鱼大师最稀有的鱼攻略
- ABC唱片-《蔡琴.三十周年纪念版》6N纯银镀膜[WAV+CUE]
- ABC唱片-《汉斯.德斯辛克.心中布鲁斯》6N纯银镀膜[WAV+CUE]
- 群星《DJ·夜色魅影HQ》头版限量[低速原抓WAV+CUE]
- 《如龙》桐生声优被警察拦下盘问:你有犯罪记录吗?
- 游族2023年净利润0.91亿元 《少年西游记2》即将公测
- 曝快手北京游戏事业部全数被裁 项目测试数据未达标
- 李雨寰.2012-我可是天使【有凰音乐】【WAV+CUE】
- 刘美君.1991-听我细诉【BMG】【WAV+CUE】
- 群星.2016-滚石爱情故事3CD【滚石】【WAV+CUE】
- 欢乐钓鱼大师怎么解锁全地图 欢乐钓鱼大师全地图解锁方法
- 欢乐钓鱼大师锦标赛在哪里进 欢乐钓鱼大师锦标赛入口位置介绍