阅读 699

【样式问题】 - 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、即修改 viewTouchableOpacity

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

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

文章分类
前端
文章标签