本文主要和大家介绍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 ( this.cellAction(item)}> { item.item.section } ) }; cellAction = (item) => { if (item.index 0) { var count = 0; for (var i = 0; i { let section = info.viewableItems[ 0 ].section.section; if (section) { let index = Headers.indexOf(section); if (index { return ( { item.item.name } { item.item.sale } { item.item.favorite } ￥{ item.item.money } ) }; sectionComp = (section) => { return ( {section.section.section} ) }; separator = () => { return ( ) }; render() { return ( this.renderLRow(item)} ItemSeparatorComponent={ () => this.separator() } keyExtractor={ (item) => item.section } /> this.sectionComp(section) } renderItem={ (item) => this.renderRRow(item) } sections={ ParcelData } keyExtractor={ (item) => item.name } onViewableItemsChanged={ (info) => this.itemChange(info) } /> ); }}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> extends React.PureComponent, void> { props: Props; static defaultProps: DefaultProps = defaultProps; render() { const List = this.props.legacyImplementation ? MetroListView : VirtualizedSectionList; return ; } _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 ; } _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);
登录后复制
五：效果图如下：
相关推荐：
详解PHP中each与list的使用
关于移动端IndexList详解
移动端IndexList效果介绍
以上就是详解React-Native左右联动List的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2787121.html
