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.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:'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',
    }
});