这次给大家带来react-native实现左右联动（附代码），react-native实现左右联动的注意事项有哪些，下面就是实战案例，一起来看一下。
react native的使用对于一些从事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 ? '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/392303113449301.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/392303113449301.jpg
}
]
},
{
section : 折扣套餐,
data : [
{
name : 特色蟹黄汤包+鸭血粉丝汤+果汁套餐,
sale : 月售875,
favorite : 赞31,
money : 50,
img:http://p1.meituan.net/deal/392303113449301.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/392303113449301.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/392303113449301.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/392303113449301.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/392303113449301.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/392303113449301.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&llt;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);
}
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
shiro授权实现详解
vue proxytable怎么实现接口跨域请求调试
以上就是react-native实现左右联动（附代码）的详细内容。