最近遇到了这样一个需求，需要用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 }) => (
{item.title}
);
_renderDetailItem = ({ item }) => (
{item.name0}
{item.name1}
{item.name2}
{item.name3}
{item.name4}
);
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 (
股票名称
最新 涨幅 现量 总量 振幅
item.id}
bounces={false}
scrollEventThrottle={8}
ref={'headerFlatListScroll'} />
item.id}
bounces={false}
ref={'detailFlatListScroll'} />
);
}
}
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,
}
});
如果你有更好的方法，希望和我探讨。