Home > Article > Web Front-end > React-Native realizes left and right linkage (with code)
React-Native realizes left and right linkage (with code)
- php中世界最好的语言Original
- 2018-04-18 10:21:382951browse
This time I will bring you React-Native to realize left and right linkage (with code). What are the precautions for React-Native to realize left and right linkage. The following is a practical case. Let’s take a look. .
The use of React Native is also very important for some people who are engaged in React Native development. This article will introduce to you how to achieve left and right linkage of lists in React Native. I believe this is also a problem that troubles many people. Let's take a look at the sample code in detail.
1: Left and right linked lists are very common at work.
Today I will share an example written by a colleague. I only made simple modifications.
Note: The source code must be modified for this example, please refer to Article 3 of this article.
Two: 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"
}
]
}
]
Three: Modify the source code
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
The path is in node_modules/react-native/Libraries/Lists/VirtualizedSectionList.js, and is modified as follows at about line 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);
}
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other php Chinese websites. related articles!
Recommended reading:
Shiro authorization implementation detailed explanation
##How vue proxyTable implements interface cross-domain request debugging
The above is the detailed content of React-Native realizes left and right linkage (with code). 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
Previous article：How to create multiplication table using JSNext article：How to create multiplication table using JS
Related articles
See more- An in-depth analysis of the Bootstrap list group component
- Detailed explanation of JavaScript function currying
- Complete example of JS password generation and strength detection (with demo source code download)
- Angularjs integrates WeChat UI (weui)
- How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills