React-Native 좌우 연계 목록에 대한 자세한 설명
이 글은 주로 React-Native 좌우 연결 목록의 예제 코드를 소개합니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라가서 모두에게 도움이 되기를 바랍니다.
1: 왼쪽 및 오른쪽 연결 목록은 직장에서 매우 일반적입니다.
오늘은 동료가 작성한 예시를 공유하겠습니다.
참고: 이 예제에서는 소스 코드를 수정해야 합니다. 이 문서의 3항을 참조하세요.
둘: 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/__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- :섹션 목록
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 ? 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);
}Four:
1- : 코드 github 주소: https:/ /github.com/erhutime/React-Navigation-All
2-: 다운로드 완료 후 index.ios.js 수정: 항목 파일은 다음과 같습니다.
import App from './jscode/doubleList/App' AppRegistry.registerComponent('All', () => App);
5: 렌더링은 다음과 같습니다:
관련 권장 사항:
위 내용은 React-Native 좌우 연계 목록에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7439
15
1369
52
76
11
31
19
Zhengtu IPx 클래식 애니메이션 'Journey to the West' 서쪽으로의 여행은 용감하고 용감합니다.
Jun 10, 2024 pm 06:15 PM
광활한 곳을 여행하고 서쪽으로 여행을 떠나세요! 오늘 Zhengtu IP는 전통과 혁신을 결합한 문화 축제를 공동으로 만들기 위해 CCTV 애니메이션 '서유기'와 국경 간 협력을 시작할 것이라고 공식 발표했습니다! 이번 협력은 국내 두 주요 클래식 브랜드 간의 심층적인 협력을 의미할 뿐만 아니라 중국 전통 문화를 홍보하려는 Journey 시리즈의 끊임없는 노력과 끈기를 보여줍니다. Zhengtu 시리즈는 탄생 이후 심오한 문화 유산과 다양한 게임 플레이로 플레이어들의 사랑을 받아왔습니다. 문화적 유산 측면에서 Zhengtu 시리즈는 항상 중국 전통 문화에 대한 존경과 사랑을 유지해 왔으며 전통 문화 요소를 게임에 교묘하게 통합하여 플레이어에게 더 많은 재미와 영감을 선사했습니다. CCTV 애니메이션 '서유기'는 세대를 거쳐 성장해 온 고전이다.
리액트 네이티브 버전을 변경하는 방법
Jan 19, 2023 pm 02:31 PM
React Native 버전을 변경하는 방법: 1. React Native 프로젝트 디렉토리에 들어가서 명령줄에 "react-native --version"을 입력합니다. 2. npm 패키지에서 관리하는 React Native 버전을 확인합니다. .json" 파일에서 종속성 필드를 수정하고 "react-native" 버전을 대상 버전으로 변경합니다.
더블 셰프 엑스터시! '음양사'×'하츠네 미쿠' 콜라보레이션이 3월 6일부터 시작됩니다
Feb 22, 2024 pm 06:52 PM
NetEase의 "음양사" 모바일 게임은 오늘 음양사 x 하츠네 미쿠 한정 콜라보레이션이 3월 6일에 공식적으로 시작될 것이라고 발표했습니다. 콜라보레이션 한정 SSR 하츠네 미쿠(CV: 후지타 사키)와 SSR 카가미네 린(CV: 시모다 아사미)이 헤이안쿄에 등장합니다! 연계 온라인 특별공연 이벤트가 3월 9일 게임 내에서 정식으로 시작됩니다~
PHP에서 Redis 목록 작업을 구현하는 방법
May 26, 2023 am 11:51 AM
목록 작업 //목록의 선두에서 값을 삽입합니다. $ret=$redis->lPush('city','guangzhou');//목록 끝에 값을 삽입합니다. $ret=$redis->rPush('city','guangzhou');//목록의 지정된 범위에 있는 요소를 가져옵니다. 0은 목록의 첫 번째 요소를 나타내고, -1은 마지막 요소를 나타내고, -2는 끝에서 두 번째 요소를 나타냅니다. $ret=$redis->l
프라이드치킨은 훌륭한 사업이고 실수할 여지가 없습니다! 'Backwater Cold'는 KFC와 연결되어 플레이어가 '치킨 소리를 들으면 춤을 추게' 합니다.
Apr 17, 2024 pm 06:34 PM
이날 '백워터 콜드'는 4월 19일부터 5월 12일까지 KFC와 연계를 론칭한다고 공식 발표했다. 그러나 구체적인 연계 내용은 많은 이들을 경악케 했다. 그것은 사회에 중요합니다." 죽었다"! 그 이유는 이번 테마 이벤트의 슬로건에 있습니다. KFC의 '원신임팩트'와 '벵티에'의 연계를 본 친구들은 '니수이'에서 '다른 세계를 만나 맛있는 음식을 즐기는 것'이 현실이 되었다는 인상을 받았을 것입니다. 한" 지금: 사무원에게 "하나님이 사건을 조사하고 계시는데 당신은 누구입니까?"라고 외쳐라. 사무원은 "치킨은 큰 사업이고 오류가 있을 수 없다!"라고 대답해야 한다. 직원을 위한 교육 가이드: 절대 웃지 마세요! 뿐만 아니라 이번 콜라보는 댄스 경연대회도 진행했다. 테마스토어에 가서 '지' 소리가 들리면 춤을 추면 작은 악보대도 얻을 수 있다. 부끄럽다, 너무 부끄럽다! 하지만 그게 내가 원하는 거야
고전 재회, 시공간 역전, '용과 같은 2' x '서유기' 영화 연계 결정
Mar 28, 2024 pm 04:40 PM
시간과 공간을 뒤바꾸는 클래식한 재회. 모바일 게임 '드래곤 2'와 고전 영화 '서유기'가 4월 11일 공동 개봉 예정입니다! 충칭의 전설적인 이야기를 다시 Zhizunbao와 Zixia의 전투를 목격하십시오. 형형색색의 상서로운 구름이 있을 것이고, 황금 갑옷과 성의가 있을 것입니다. "반야바라밀타"라는 말이 여러분의 귓가에 울려 퍼지면 자하가 지존보(大寶)의 가슴에 남긴 눈물을 생각해 보시겠습니까? 천년, 그러나 운명의 운명을 피할 수는 없습니다. 돌아올 수 없더라도 죽을 때까지 내 사랑은 결코 변하지 않을 것입니다. 서유기 콜라보 출연작 [만년의 외눈]과 [신의 뜻]이 기념일 버전과 동시에 출시됩니다. 황금 갑옷을 입거나, 자신만의 비할 데 없는 영웅을 만나, 가장 열정적인 청춘으로 돌아갈 수 있기를 바랍니다. 오백년의 수호, 죽을 때까지의 진실한 사랑, 그날 낙양을 만났을 때 우연히 한 말
JSONArray를 Java의 List로 변환하는 방법
May 04, 2023 pm 05:25 PM
1：JSONArray转ListJSONArray자세한 내용은 JSONArrayJSONArrayarray=newJSONArray();array.add(0,"a");array.add(1,"b");array.add(2,"c") ;Listlist=JSONObject.parseArray(array.toJSONString(),String.class);System.out.println(list.to
'디아블로: 임모탈'과 '검과 요정의 전설'의 콜라보레이션이 결정됐습니다!
Apr 17, 2024 pm 02:58 PM
넷이즈게임즈는 '디아블로: 임모탈'이 '검과 요정의 전설'과 연계하기로 결정했다고 오늘 밝혔다. 4월 24일, '일검은 행복하다'가 불멸의 수련의 새로운 시대를 연다! 하나는 서양 판타지의 고전이고, 다른 하나는 동양 불사신의 영원한 기억으로, 암흑의 우주와 요정검이 시공간적으로 얽혀 있으며, 두 개의 주요 IP가 협력하여 악마를 처치합니다. 4월 24일, 정의와 기사도의 불멸의 전설이 성역에서 상연됩니다!
