最近遇到了这样一个需求，需要用rn实现：区域4滑动时候，区域3随着垂直方向滚动，区域2随之水平方向滑动：
区域划分
效果图
思路： 监听 onscroll方法 ，改变其他联动控件。
下面附上代码：
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
ScrollView,
FlatList
} from 'react-native';
const data = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: '股票1',
name0: 'a', name1: 'b', name2: 'c', name3: 'd', name4: 'e'
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: '股票2',
name0: 'a', name1: 'b', name2: 'c', name3: 'd', name4: 'e'
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: '股票3',
name0: 'a', name1: 'b', name2: 'c', name3: 'd', name4: 'e'
},
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28aa',
title: '股票4',
name0: 'a', name1: 'b', name2: 'c', name3: 'd', name4: 'e'
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97fas',
title: '股票5',
name0: 'a', name1: 'b', name2: 'c', name3: 'd', name4: 'e'
},
{
id: '58694a0f-3da1-471f-bd96-145571e29ddd',
title: '股票6',
name0: 'a', name1: 'b', name2: 'c', name3: 'd', name4: 'e'
}, {
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: '股票7',
name0: 'a', name1: 'b', name2: 'c', name3: 'd', name4: 'e'
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: '股票8',
name0: 'a', name1: 'b', name2: 'c', name3: 'd', name4: 'e'
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: '股票9',
name0: 'a', name1: 'b', name2: 'c', name3: 'd', name4: 'e'
},
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28aa',
title: '股票10',
name0: 'a', name1: 'b', name2: 'c', name3: 'd', name4: 'e'
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97fas',
title: '股票11',
name0: 'a', name1: 'b', name2: 'c', name3: 'd', name4: 'e'
},
{
id: '58694a0f-3da1-471f-bd96-145571e29ddd',
title: '股票12',
name0: 'a', name1: 'b', name2: 'c', name3: 'd', name4: 'e'
}, {
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: '股票13',
name0: 'a', name1: 'b', name2: 'c', name3: 'd', name4: 'e'
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: '股票14',
name0: 'a', name1: 'b', name2: 'c', name3: 'd', name4: 'e'
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: '股票15',
name0: 'a', name1: 'b', name2: 'c', name3: 'd', name4: 'e'
},
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28aa',
title: '股票16',
name0: 'a', name1: 'b', name2: 'c', name3: 'd', name4: 'e'
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97fas',
title: '股票17',
name0: 'a', name1: 'b', name2: 'c', name3: 'd', name4: 'e'
},
{
id: '58694a0f-3da1-471f-bd96-145571e29ddd',
title: '股票18',
name0: 'a', name1: 'b', name2: 'c', name3: 'd', name4: 'e'
}, {
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: '股票19',
name0: 'a', name1: 'b', name2: 'c', name3: 'd', name4: 'e'
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: '股票20',
name0: 'a', name1: 'b', name2: 'c', name3: 'd', name4: 'e'
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: '股票21',
name0: 'a', name1: 'b', name2: 'c', name3: 'd', name4: 'e'
},
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28aa',
title: '股票22',
name0: 'a', name1: 'b', name2: 'c', name3: 'd', name4: 'e'
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97fas',
title: '股票23',
name0: 'a', name1: 'b', name2: 'c', name3: 'd', name4: 'e'
},
{
id: '58694a0f-3da1-471f-bd96-145571e29ddd',
title: '股票24',
name0: 'a', name1: 'b', name2: 'c', name3: 'd', name4: 'e'
}, {
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: '股票25',
name0: 'a', name1: 'b', name2: 'c', name3: 'd', name4: 'e'
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: '股票26',
name0: 'a', name1: 'b', name2: 'c', name3: 'd', name4: 'e'
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: '股票27',
name0: 'a', name1: 'b', name2: 'c', name3: 'd', name4: 'e'
},
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28aa',
title: '股票28',
name0: 'a', name1: 'b', name2: 'c', name3: 'd', name4: 'e'
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97fas',
title: '股票29',
name0: 'a', name1: 'b', name2: 'c', name3: 'd', name4: 'e'
},
{
id: '58694a0f-3da1-471f-bd96-145571e29ddd',
title: '股票30',
name0: 'a', name1: 'b', name2: 'c', name3: 'd', name4: 'e'
},
];
const otherHeaderWidth = 100;
export default class Home extends Component {
constructor(props) {
super(props);
this.itemHeigt = 50;
this.headerNameWidth = 120;
this.state = {
}
}
_renderHeaderItem = ({ item }) => (
<View style={{ height: this.itemHeigt, width: this.headerNameWidth, justifyContent: 'center', alignItems: 'center', borderWidth: 0.5, borderColor: '#000', overflow: 'hidden' }}>
<Text >{item.title}</Text>
</View>
);
_renderDetailItem = ({ item }) => (
<View style={{ flexDirection: 'row', height: this.itemHeigt, }}>
<View style={styles.FlatListItem}>
<Text >{item.name0}</Text>
</View>
<View style={styles.FlatListItem}>
<Text >{item.name1}</Text>
</View>
<View style={styles.FlatListItem}>
<Text >{item.name2}</Text>
</View>
<View style={styles.FlatListItem}>
<Text >{item.name3}</Text>
</View>
<View style={styles.FlatListItem}>
<Text >{item.name4}</Text>
</View>
</View>
);
headerFlatListOnScroll(event) {
let ofSet = event.nativeEvent.contentOffset;
// console.log('headerFlatListOnScroll_____x:' + ofSet.x + " "+"y:"+ ofSet.y);
let scroll = this.refs['detailFlatListScroll']
// console.log(scroll);
scroll.scrollToOffset({ animated: false, offset: ofSet.y });
}
detailFlatListOnScroll(event) {
let ofSet = event.nativeEvent.contentOffset;
// // console.log('detailFlatListOnScroll_' + ofSet);
//
let scroll = this.refs.headerFlatListScroll
scroll.scrollToOffset({ offset: ofSet.y, animated: false });
}
headerOnScroll(event) {
let ofSet = event.nativeEvent.contentOffset;
// console.log('headerOnScroll_' + ofSet);
let scroll = this.refs.detailScroll
scroll.scrollTo({ x: ofSet.x, y: ofSet.y, animated: false });
}
detailOnScroll(event) {
let ofSet = event.nativeEvent.contentOffset;
// console.log('detailOnScroll_' + ofSet);
//
let scroll = this.refs.headerScroll
scroll.scrollTo({ x: ofSet.x, y: ofSet.y, animated: false });
}
render() {
return (
<View style={styles.container}>
<View style={{ flexDirection: 'row', height: this.itemHeigt }}>
<View style={{ justifyContent: 'center', alignItems: 'center', width: this.headerNameWidth, borderWidth: 0.5, borderColor: '#000', overflow: 'hidden' }}>
<Text >股票名称</Text>
</View>
<ScrollView style={{ backgroundColor: '#green', flex: 1 }}
scrollEventThrottle={8}
horizontal={true}
onScroll={this.headerOnScroll.bind(this)}
bounces={false}
ref={'headerScroll'}
>
<View style={styles.itemView} ><Text >最新</Text></View>
<View style={styles.itemView} ><Text >涨幅</Text></View>
<View style={styles.itemView} ><Text >现量</Text></View>
<View style={styles.itemView} ><Text >总量</Text></View>
<View style={styles.itemView} ><Text >振幅</Text></View>
</ScrollView>
</View>
<View style={{ flex: 1, flexDirection: 'row' }}>
<View style={{ width: this.headerNameWidth }}>
<FlatList style={{}}
data={data}
renderItem={this._renderHeaderItem}
onScroll={this.headerFlatListOnScroll.bind(this)}
keyExtractor={item => item.id}
bounces={false}
scrollEventThrottle={8}
ref={'headerFlatListScroll'} />
</View>
<ScrollView style={{ backgroundColor: '#fff' }}
onScroll={this.detailOnScroll.bind(this)}
scrollEventThrottle={8}
horizontal={true}
bounces={false}
ref={'detailScroll'}>
<FlatList style={{ flex: 1 }}
data={data}
onScroll={this.detailFlatListOnScroll.bind(this)}
scrollEventThrottle={8}
renderItem={this._renderDetailItem}
keyExtractor={item => item.id}
bounces={false}
ref={'detailFlatListScroll'} />
</ScrollView>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
itemView: {
width: otherHeaderWidth,
justifyContent: 'center',
alignItems: 'center',
borderWidth: 0.5,
borderColor: '#000',
backgroundColor: 'green',
overflow: 'hidden'
},
FlatListItem: {
width: otherHeaderWidth,
justifyContent: 'center',
alignItems: 'center',
borderWidth: 0.5,
borderColor: '#000',
overflow: 'hidden'
},
container: {
flex: 1,
}
});
如果你有更好的方法，希望和我探讨。
网友评论