[Style issue] – The inner FlatList cannot scroll when using the Model in React Native

Directory:

1. Release notes
2. The problem
3. Problem analysis
4. The solution

I. Version description

Mac React:"16.11.0"
react-native: "0.62.2"Node: 12.16.2# node -vNPM: 6.14.4# npm -v
Copy the code

Ii. Problems:React NativeThe use ofModelWhen the internalFlatListCan’t scroll

2.1. Return the contents of the element as follows:

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>
)
Copy the code

Three, reason analysis: mainlyFlatListUnder therenderItemThat is, each column of elements should beTouchSeries of component packages, the original layout is as follows

3.1 Main contents are as follows

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

RenderContColumnItem: ✌️

4.1, namely modificationview 为 TouchableOpacity

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

Write to oneself essay, have a question welcome to point out