React-Native左右聯(lián)動(dòng)List的示例代碼
更新時(shí)間：2017年09月21日 10:45:57 作者：Time_情書(shū)
本篇文章主要介紹了React-Native左右聯(lián)動(dòng)List的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
一：左右聯(lián)動(dòng)List,在工作中很常見(jiàn)。
今天分享一個(gè)同事寫(xiě)的例子，本人只做了簡(jiǎn)單修改。
注意：本例子必須修改源碼，參考本文第三條。
二：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 : '聯(lián)動(dòng)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" : "慎用差評(píng)！任何問(wèn)題聯(lián)系我們就可解決哦",
"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" : "臺(tái)式鹵肉飯+南瓜粥套餐",
"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" : "鮑魚(yú)湯包",
"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" : "調(diào)味小菜",
"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" : "可樂(lè)",
"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<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);
}
四：
1-：代碼github地址：https://github.com/erhutime/React-Navigation-All
2-：下載完成后，修改index.ios.js:入口文件如下：
import App from './jscode/doubleList/App'
AppRegistry.registerComponent('All', () => App);
五：效果圖如下：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
react.js 獲取真實(shí)的DOM節(jié)點(diǎn)實(shí)例(必看)
下面小編就為大家?guī)?lái)一篇react.js 獲取真實(shí)的DOM節(jié)點(diǎn)實(shí)例(必看)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
React合成事件及Test Utilities在Facebook內(nèi)部進(jìn)行測(cè)試
這篇文章主要介紹了React合成事件及Test Utilities在Facebook內(nèi)部進(jìn)行測(cè)試，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
React路由規(guī)則定義與聲明式導(dǎo)航及編程式導(dǎo)航分別介紹
這篇文章主要介紹了React路由規(guī)則的定義、聲明式導(dǎo)航、編程式導(dǎo)航，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-09-09
這篇文章主要為大家詳細(xì)介紹了React處理復(fù)雜圖片樣式的方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
React入門(mén)教程之Hello World以及環(huán)境搭建詳解
Facebook 為了開(kāi)發(fā)一套更好更適合自己的JavaScript MVC 框架，所以產(chǎn)生了react。后來(lái)反響很好,所以于2013年5月開(kāi)源。下面這篇文章主要給大家介紹了關(guān)于React入門(mén)教程之Hello World以及環(huán)境搭建的相關(guān)資料，需要的朋友可以參考借鑒。2017-07-07
詳解react中的state的簡(jiǎn)寫(xiě)方式
React是一個(gè)狀態(tài)機(jī)主要體現(xiàn)在state上，通過(guò)與用戶交易實(shí)現(xiàn)不同的狀態(tài)，state是組件的私有屬性，是用來(lái)初始化的，本文重點(diǎn)給大家介紹react中的state的簡(jiǎn)寫(xiě)方式，感興趣的朋友一起看看吧2021-08-08
這篇文章主要介紹了react中如何使用局部樣式問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
React 首頁(yè)加載慢問(wèn)題性能優(yōu)化案例詳解
這篇文章主要介紹了React 首頁(yè)加載慢問(wèn)題性能優(yōu)化案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
React實(shí)現(xiàn)浮層組件的思路與方法詳解
React?浮層組件（也稱為彈出組件或彈窗組件）通常是指在用戶界面上浮動(dòng)顯示的組件,本文主要介紹了浮層組件的實(shí)現(xiàn)方法,感興趣的小伙伴可以了解下2024-02-02
這篇文章主要介紹了React-hooks中的useEffect,對(duì)于React組件來(lái)說(shuō)，主作用是根據(jù)數(shù)據(jù)(state/props)渲染UI，除此之外都是副作用（比如手動(dòng)修改DOM、發(fā)送ajax請(qǐng)求），本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-05-05