【问题标题】:React-native make List-FlatList with Texts scrollableReact-native 使 List-FlatList 与 Texts 可滚动
【发布时间】:2019-03-29 05:28:41
【问题描述】:

我在使用 React-native 的 List 类启用可滚动性时遇到问题。你可以在下面看到我的结构:

<Container>
    <View style={styles.container}>
        <TouchableWithoutFeedback>
            <View style={styles.content}>
                <View style={styles.mainBoxes}></View>
                <Text style={{textAlign: 'center', fontWeight: 'bold', fontSize: 24, paddingTop: 20}}>Title</Text>
                <List>
                    <FlatList
                        data=...
                        renderItem={({item, index}) => (
                            <View>
                                <Text style={{fontWeight: 'bold', fontSize: 20, paddingTop: 20, paddingLeft: 20, paddingRight: 20}}>{item.content}</Text>
                                <List>
                                    <FlatList
                                        data=...
                                        renderItem={({item, index}) => (
                                            <View>
                                                <Text style={{fontSize: 18, paddingTop: 10, paddingLeft: 40, paddingRight: 20}}>...</Text>
                                            </View>
                                        )}
                                        keyExtractor=...
                                    />
                                </List>
                            </View>
                            )}
                        keyExtractor=...
                    />
                </List>
            </View>
        </TouchableWithoutFeedback>
    </View>
</Container>

我想要滚动的部分是从第一个列表(代码中的第 6 行)之前的文本开始,直到列表的末尾。我曾尝试使用 ScrollView,添加/删除 flex: 1,但没有成功。任何帮助将不胜感激。

【问题讨论】:

  • 为什么要使用 flatList 添加 List。 Flatlist 本身是可滚动的。
  • 感谢您的回复。列表确实是多余的,但即使没有列表,问题仍然存在。
  • 去掉标签后再试试。

标签: react-native scroll react-native-flatlist


【解决方案1】:

问题是 TouchableWithoutFeedback 类,因此删除它解决了问题。

【讨论】:

    猜你喜欢
    • 2021-03-23
    • 1970-01-01
    • 1970-01-01
    • 2021-05-10
    • 1970-01-01
    • 1970-01-01
    • 2018-10-30
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多