react native scrollView FlatList 多级联动

思路就是监听 onscroll方法改变其他联动控件，下面是一个例子

import React, {Component} from 'react';
import {StyleSheet,Text,View,TouchableOpacity,ScrollView,FlatList
} from 'react-native';const DATA = [{id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',title: 'First Item',name0:'a',name1:'b',name2:'c',name3:'d',name4:'e'},{id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',title: 'Second Item',name0:'a',name1:'b',name2:'c',name3:'d',name4:'e'},{id: '58694a0f-3da1-471f-bd96-145571e29d72',title: 'Third Item',name0:'a',name1:'b',name2:'c',name3:'d',name4:'e'},{id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28aa',title: 'First1 Item',name0:'a',name1:'b',name2:'c',name3:'d',name4:'e'},{id: '3ac68afc-c605-48d3-a4f8-fbd91aa97fas',title: 'Second2 Item',name0:'a',name1:'b',name2:'c',name3:'d',name4:'e'},{id: '58694a0f-3da1-471f-bd96-145571e29ddd',title: 'Third3 Item',name0:'a',name1:'b',name2:'c',name3:'d',name4:'e'},{id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',title: 'First Item',name0:'a',name1:'b',name2:'c',name3:'d',name4:'e'},{id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',title: 'Second Item',name0:'a',name1:'b',name2:'c',name3:'d',name4:'e'},{id: '58694a0f-3da1-471f-bd96-145571e29d72',title: 'Third Item',name0:'a',name1:'b',name2:'c',name3:'d',name4:'e'},{id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28aa',title: 'First1 Item',name0:'a',name1:'b',name2:'c',name3:'d',name4:'e'},{id: '3ac68afc-c605-48d3-a4f8-fbd91aa97fas',title: 'Second2 Item',name0:'a',name1:'b',name2:'c',name3:'d',name4:'e'},{id: '58694a0f-3da1-471f-bd96-145571e29ddd',title: 'Third3 Item',name0:'a',name1:'b',name2:'c',name3:'d',name4:'e'},{id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',title: 'First Item',name0:'a',name1:'b',name2:'c',name3:'d',name4:'e'},{id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',title: 'Second Item',name0:'a',name1:'b',name2:'c',name3:'d',name4:'e'},{id: '58694a0f-3da1-471f-bd96-145571e29d72',title: 'Third Item',name0:'a',name1:'b',name2:'c',name3:'d',name4:'e'},{id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28aa',title: 'First1 Item',name0:'a',name1:'b',name2:'c',name3:'d',name4:'e'},{id: '3ac68afc-c605-48d3-a4f8-fbd91aa97fas',title: 'Second2 Item',name0:'a',name1:'b',name2:'c',name3:'d',name4:'e'},{id: '58694a0f-3da1-471f-bd96-145571e29ddd',title: 'Third3 Item',name0:'a',name1:'b',name2:'c',name3:'d',name4:'e'},{id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',title: 'First Item',name0:'a',name1:'b',name2:'c',name3:'d',name4:'e'},{id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',title: 'Second Item',name0:'a',name1:'b',name2:'c',name3:'d',name4:'e'},{id: '58694a0f-3da1-471f-bd96-145571e29d72',title: 'Third Item',name0:'a',name1:'b',name2:'c',name3:'d',name4:'e'},{id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28aa',title: 'First1 Item',name0:'a',name1:'b',name2:'c',name3:'d',name4:'e'},{id: '3ac68afc-c605-48d3-a4f8-fbd91aa97fas',title: 'Second2 Item',name0:'a',name1:'b',name2:'c',name3:'d',name4:'e'},{id: '58694a0f-3da1-471f-bd96-145571e29ddd',title: 'Third3 Item',name0:'a',name1:'b',name2:'c',name3:'d',name4:'e'},{id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',title: 'First Item',name0:'a',name1:'b',name2:'c',name3:'d',name4:'e'},{id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',title: 'Second Item',name0:'a',name1:'b',name2:'c',name3:'d',name4:'e'},{id: '58694a0f-3da1-471f-bd96-145571e29d72',title: 'Third Item',name0:'a',name1:'b',name2:'c',name3:'d',name4:'e'},{id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28aa',title: 'First1 Item',name0:'a',name1:'b',name2:'c',name3:'d',name4:'e'},{id: '3ac68afc-c605-48d3-a4f8-fbd91aa97fas',title: 'Second2 Item',name0:'a',name1:'b',name2:'c',name3:'d',name4:'e'},{id: '58694a0f-3da1-471f-bd96-145571e29ddd',title: 'Third3 Item',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',backgroundColor:'orange',borderWidth:0.5,borderColor:'blue'}}><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.headerFlatListScrollscroll.scrollToOffset({offset:ofSet.y,animated: false});}headerOnScroll(event){let ofSet = event.nativeEvent.contentOffset;// console.log('headerOnScroll_' + ofSet);let scroll = this.refs.detailScrollscroll.scrollTo({x: ofSet.x, y: ofSet.y, animated: false});}detailOnScroll(event){let ofSet = event.nativeEvent.contentOffset;console.log('detailOnScroll_' + ofSet);//let scroll = this.refs.headerScrollscroll.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:'blue'}}><Text >基金名称</Text></View><ScrollView style={{backgroundColor:'yellow', flex:1}}scrollEventThrottle={8}horizontal={true}onScroll={this.headerOnScroll.bind(this)}bounces={false}ref={'headerScroll'}><View style={styles.itemView} ><Text >1</Text></View><View style={styles.itemView} ><Text >2</Text></View><View style={styles.itemView} ><Text >3</Text></View><View style={styles.itemView} ><Text >4</Text></View><View style={styles.itemView} ><Text >5</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:'lime'}}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:'blue'},FlatListItem:{width:otherHeaderWidth, justifyContent:'center',alignItems:'center',backgroundColor:'aqua',borderWidth:0.5,borderColor:'blue'},container: {flex: 1,backgroundColor: '#F5FCFF',}
});

react native scrollView FlatList 多级联动相关推荐

React Native 之FlatList
1.新建项目 2.因为要用到导航跳转, 所以添加依赖,,这里拷贝这个: "dependencies": {"@types/react": "^16.9 ...
react native ScrollView
ScrollView是一个通用的可滚动的容器,你可以在其中放入多个组件和视图,而且这些组件并不需要是同类型的.ScrollView不仅可以垂直滚动,还能水平滚动(通过horizontal属性来设置). ...
【react native】Flatlist实现上拉滚动加载
参考博客:React Native FlatList上拉加载.FlatList enum FooterType {Null = 0,NoData = 1,LoadingData = 2, }expor ...
React Native 实现FlatList的下拉刷新上拉加载
RN对列表已经实现了下拉刷新与上拉加载的功能,但是为了更好用,做了封装. 实现的功能: 1.下拉刷新,使用原生下拉头. 2.上拉加载,自定义加载布局. 3.处理了重复刷新或重复 ...
react native关于FlatList的随手记
FlatList 注意: 1. 滑出渲染区域后,内部状态不保留,请确保组件以外保留了数据 2. 为了优化内存占用同时保持滑动顺畅,列表内容会在屏幕外绘制,如果滑动速度超过渲染速度,则会先看到空白内容3 ...
React Native——组件FlatList
属性添加头部组件 ListHeaderComponent属性用来给FlatList添加头部组件简单使用: //ES6之前写法 _header = function () {return (< ...
react native ScrollView实现滑动锚定，滑动到指定位置
实现ScrollView滑动视图组件滑动到指定位置,实现tab与具体位置相锚定给需要锚定的组件加上onLayout属性 //event.nativeEvent.layout.x是水平方向值,even ...
React Native列表视图FlatList使用优化实践指南
列表视图在app中是非常常见的,目前React Native比较严重的性能问题集中在FlatList大列表等地方,以下通过js层的优化,甚至原生层的优化封装,使性能媲美原生. FlatList Rea ...
如何构建具有实时搜索功能的React Native FlatList
by Vikrant Negi 通过Vikrant Negi 如何构建具有实时搜索功能的React Native FlatList (How to build a React Native FlatL ...

react native scrollView FlatList 多级联动

react native scrollView FlatList 多级联动相关推荐

最新文章

热门文章