이번에는 왼쪽과 오른쪽 연결을 구현하기 위한 React-Native를 가져왔습니다. (코드 포함) React-Native에서 왼쪽과 오른쪽 연결을 구현하기 위한 Notes는 무엇인지 살펴보겠습니다.
React Native 개발에 종사하는 일부 사람들에게는 React Native의 사용이 매우 중요합니다. 이 기사에서는 React Native에서 목록의 왼쪽과 오른쪽 연결을 달성하는 방법도 소개할 것입니다. 아래에서 자세한 내용을 살펴보겠습니다.
1: 왼쪽 및 오른쪽 연결 목록은 직장에서 매우 일반적입니다.
오늘은 동료가 작성한 예제를 공유하겠습니다. 간단한 수정만 했습니다.
참고: 이 예제에서는 소스 코드를 수정해야 합니다. 이 문서의 3항을 참조하세요.
2: 코딩
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-:섹션목록
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);
}더 흥미로운 정보를 보려면 이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. , PHP 중국어 웹사이트의 다른 관련 기사도 주목해주세요!
추천 자료:
vue ProxyTable이 인터페이스 교차 도메인 요청 디버깅을 구현하는 방법
위 내용은 React-Native는 왼쪽과 오른쪽 연결을 구현합니다(코드 포함).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
