相同方向滚动的列表无论是ScrollView还是FlatList，他们嵌套时会出现滚动事件冲突的问题，解决思路可以通过scrollEnabled属性（无论是ScrollView还是FlatList都有scrollEnabled属性）来解决滚动事件的冲突；

目前测试发现嵌套事件冲突主要发生在RN的Android端，在iOS端是好的。

具体思路如下：

• 当内层列表滚动时将外层列表的scrollEnabled属性置为false；
• 当内层列表停止滚动时在将外层列表的scrollEnabled属性置为true；

以下是两个常见的案例可以参考下：

ScrollView嵌套ScrollView

import React, {Component} from 'react';
import {View, ScrollView} from 'react-native';

export default class App extends Component {
    state = {
        enabled: true,
    };

    render() {
        return (
            <ScrollView scrollEnabled={this.state.enabled}>
                <View style={{height: 2000, backgroundColor: 'gray'}}>
                    <View style={{height: 200, backgroundColor: '#098'}}/>
                    <ScrollView
                        onTouchStart={(ev) => {
                            this.setState({enabled: false});
                        }}
                        onMomentumScrollEnd={(e) => {
                            this.setState({enabled: true});
                        }}
                        onScrollEndDrag={(e) => {
                            this.setState({enabled: true});
                        }}
                        style={{margin: 10, maxHeight: 300}}
                    >
                        <View style={{height: 200, backgroundColor: 'orange'}}/>
                        <View style={{height: 200, backgroundColor: '#f36'}}/>
                        <View style={{height: 200, backgroundColor: 'orange'}}/>
                        <View style={{height: 200, backgroundColor: '#f36'}}/>
                        <View style={{height: 200, backgroundColor: 'orange'}}/>
                        <View style={{height: 200, backgroundColor: '#f36'}}/>
                        <View style={{height: 200, backgroundColor: 'orange'}}/>
                        <View style={{height: 200, backgroundColor: '#f36'}}/>
                        <View style={{height: 200, backgroundColor: 'orange'}}/>
                        <View style={{height: 200, backgroundColor: '#f36'}}/>
                        <View style={{height: 200, backgroundColor: 'orange'}}/>
                        <View style={{height: 200, backgroundColor: '#f36'}}/>
                    </ScrollView>
                </View>
                <View style={{height: 200, backgroundColor: 'violet'}}/>
            </ScrollView>
        );
    }
}

ScrollView嵌套FlatList

import React, {Component} from 'react';
import {View, FlatList, ScrollView, Text} from 'react-native';

export default class App extends Component<{}> {
    state = {enabled: true};

    render() {
        return (<ScrollView
                scrollEnabled={this.state.enabled}>
                {this.renderFlatList('red')}
                {this.renderFlatList('green')}
                {this.renderFlatList('purple')}
                {this.renderFlatList('pink')}
            </ScrollView>
        );
    }

    getRandomData = () => {
        return new Array(100).fill('').map((item, index) => {
            return {title: 'Title ' + (index + 1)};
        });
    };

    renderFlatList(color: string) {
        return (
            <View>
                <FlatList
                    onTouchStart={(ev) => {
                        this.setState({enabled: false});
                    }}
                    onMomentumScrollEnd={(e) => {
                        this.setState({enabled: true});
                    }}
                    onScrollEndDrag={(e) => {
                        this.setState({enabled: true});
                    }}
                    data={this.getRandomData()}
                    backgroundColor={color}
                    maxHeight={200}
                    marginBottom={50}
                    keyExtractor={(item, index) => index.toString()}
                    renderItem={({item}) => <Text>{item.title}</Text>}
                />
            </View>
        );
    }
}