【样式问题】 - React Native中使用 Model 时，内部 FlatList 无法滚动

目录：

1. 版本说明
2. 问题
3. 问题分析
4. 解决办法

一、版本说明

本机系统： Mac
react: "16.11.0"
react-native: "0.62.2"
node: 12.16.2       # node -v
npm: 6.14.4         # npm -v

二、问题：React Native 中使用 Model 时，内部 FlatList 无法滚动

2.1、返回元素内容，大致如下：

return(
    <View style={styles.edit_cont}>
        <ScrollView
            style={styles.edit_scroll_cont}
            // showsVerticalScrollIndicator={false}
            >
            <FlatList
                style={styles.edit_list}
                keyExtractor={item => item.id}
                data={this.state.contOptionData}
                extraData={this.state}
                renderItem={ ({item, index}) => this.renderContColumnItem(item, index) }
                />
        </ScrollView>
    </View>
)

三、原因分析：主要是 FlatList 下的 renderItem，即每一列元素，应该被 Touch 系列组件包裹，原来布局如下

3.1、主要内容如下

renderContColumnItem(item, index) {
    return(
        <View>
            ...
        </View>
    )
}

四、解决办法：修改 renderContColumnItem 内容如下，即可解决唷✌️

4.1、即修改 view 为 TouchableOpacity

renderContColumnItem(item, index) {
    return(
        <TouchableOpacity
            activeOpacity={1}
            style={styles.column_container}
        >
            ...
        </TouchableOpacity>
    )
}

写给自己的随笔，有问题欢迎指出