在 ScrollView 中使用 ListItem、FlatList 时发出警告

Question

当我尝试在 View 中使用 Flatlist 时收到此警告，但出现相同的错误：

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.

我在里面使用FlatList的组件是：

class About extends Component
{
    constructor(props)
    {
        super(props);
        this.state = {
            leaders: LEADERS
        };
    }

    render(){
        const renderLeaders = ({item,index}) => {
            return(
                <ListItem 
                    key = {index}
                    title = {item.name}
                    subtitle = {item.description}
                    hideChevron = {true}
                    leftAvatar = {{ source: require('./images/alberto.png') }}
                />
            );
        };

        return(
            <ScrollView>
                <History />
                <Card title = "Corporate Leadership">
                    <FlatList 
                        data = {this.state.leaders}
                        renderItem = {renderLeaders}
                        keyExtractor = {item => item.id.toString()}
                    />
                </Card>          
            </ScrollView>
        );
    }
}

我可以在这里使用 leader 代替 item 吗？我尝试使用它，但出现错误。

Answer 1

破解此问题的一种方法是使用 react-native-gesture-handler flatlist 如果你绝对需要嵌套滚动条，它会接管你的育儿 ScrollView，至少当我遇到同样的问题时它对我有用。

按照第二部分，无需深入研究什么是什么，请尝试阅读此 https://www.barrymichaeldoyle.com/destructuring/#:~:text=Renaming%20Variables%20while%20Destructuring&text=In%20order%20to%20rename%20a,rename%20the%20destructured%20variable%20to 或 google 关于 'destructuring renaming' 的任何其他理论如果您绝对需要重命名 'item'.

在 ScrollView 中使用 ListItem、FlatList 时发出警告

Warning while using ListItem, FlatList inside ScrollView

scrollview

react-native

react-native-android

react-native-flatlist