Как мне заставить мою прокрутку работать правильно?

Question

Я делаю собственный проект с моим телефоном android, подключенным к ноутбуку.

Проблема:

Когда я провожу пальцем по правой стороне экрана телефона, страница прокручивается. Но когда я провожу по центру или по левой стороне экрана телефона, страница не прокручивается.

Я также получаю предупреждение в консоли

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

Я не могу понять это предупреждение. Что такое «ориентация»?

Это мой код:

import React, { FunctionComponent, useState } from "react";
import { observer } from "mobx-react-lite";
import { Block, Text, Button, Header } from "../../components";
import { ThemeProvider, Card } from "react-native-elements";
import { View, TouchableWithoutFeedback, Keyboard, Modal, Image, ScrollView, SafeAreaView, StyleSheet, FlatList } from "react-native";
import { useNavigation } from "@react-navigation/native";
import { typography, colors, spacing } from 'theme';
import { buttonStyles } from '../../theme/components/buttonStyles';
import Icon from 'react-native-vector-icons/MaterialIcons';
import users from './users.js';

export const SuperAdminScreensOrganizationDetailsScreen: FunctionComponent<{}> = observer(props => {

return (
    <TouchableWithoutFeedback style={{ flex: 1 }} onPress={Keyboard.dismiss}>
        <SafeAreaView>
            <Header title="Organizations" navigation={props.navigation} />
            <ScrollView>
                <Block mb={spacing.huge}>
                    <Card>
                        <Block row space="between">
                            <Block>
                                <Text preset="subheader" >Organization 1</Text>
                                <Text preset="secondary">Expiration Date: 03-08-2019</Text>
                            </Block>
                            <Block row>
                                <Icon name="edit" size={spacing.large} />
                                <Text ml={spacing.tiny} preset="bold">
                                    Edit
                                </Text>
                            </Block>
                        </Block>
                        <Block row space="between">
                            <Block bottom left>
                                <Text preset="smallBold">
                                    Prateek Kolhi
                                </Text>
                                <Text preset="fieldLabel">+1 654 893 8098</Text>
                            </Block>
                            <Block>
                                <Block row right bottom>
                                    <ThemeProvider theme={buttonStyles}>
                                        <Button
                                            title="Add User"
                                            buttonStyle={{
                                                width: typography.smallButtonWidth,
                                                height: typography.smallButtonHeight
                                            }}
                                            titleStyle={{
                                                fontSize: typography.smallButtonFontSize,
                                                marginHorizontal: typography.smallButtonmx
                                            }}
                                            onPress={() => navigation.navigate('AddNewUser')}
                                        />
                                    </ThemeProvider>
                                    <Block mx={spacing.tiny}></Block>
                                    <ThemeProvider theme={buttonStyles}>
                                        <Button
                                            title="Delete"
                                            buttonStyle={{
                                                width: typography.smallButtonWidth,
                                                height: typography.smallButtonHeight,
                                                backgroundColor: colors.cancelButtonBackground,
                                                borderWidth: typography.buttonBorderWidth,
                                                borderColor: colors.cancelButtonBorder
                                            }}
                                            titleStyle={{
                                                fontSize: typography.smallButtonFontSize,
                                                marginHorizontal: typography.smallButtonmx,
                                                color: colors.titleColor
                                            }}
                                            onPress={openModal}
                                        />
                                    </ThemeProvider>
                                </Block>
                                <Block bottom right>
                                    <Text preset="fieldLabel">root@organization.com</Text>
                                </Block>
                            </Block>
                        </Block>
                        <Text
                            mt={spacing.tiny}
                            pa={spacing.tiny}
                            style={{ backgroundColor: colors.totalMembers }}
                            mx={-spacing.medium}
                            mb={-spacing.medium}
                            pl={spacing.medium}
                        >
                            Total Members: {users.length}
                        </Text>
                        <FlatList
                            style={{ marginHorizontal: -spacing.medium }}
                            contentContainerStyle={{ paddingBottom: spacing.medium }}
                            data={users}
                            keyExtractor={(item, index) => item.id}
                            renderItem={({ item }) => (
                                <Card
                                    containerStyle={styles.userCards}
                                >
                                    <Block row space="between" style={{ alignItems: 'center' }}>
                                        <Block row>
                                            <Block>
                                                <Image
                                                    source={item.src}
                                                    style={{ height: 50, width: 50, borderRadius: 25 }}
                                                />
                                            </Block>
                                            <Block ml={spacing.small} style={{ justifyContent: 'center' }}>
                                                <Text preset="smallBold">{item.firstName} {item.lastName}</Text>
                                                <Text preset="secondary">{item.role}</Text>
                                            </Block>
                                        </Block>
                                        <Block>
                                            <ThemeProvider theme={buttonStyles}>
                                                <Button
                                                    onPress={() => navigation.navigate('AddNewUser')}
                                                    title="Edit Role"
                                                    buttonStyle={{
                                                        width: typography.smallButtonWidth,
                                                        height: typography.smallButtonHeight
                                                    }}
                                                    titleStyle={{
                                                        fontSize: typography.smallButtonFontSize,
                                                        marginHorizontal: typography.smallButtonmx
                                                    }}
                                                />
                                            </ThemeProvider>
                                        </Block>
                                    </Block>
                                </Card>
                            )}
                        />
                    </Card>
                </Block>
            </ScrollView>
        </SafeAreaView>
    </TouchableWithoutFeedback>
);
});

Может кто-нибудь сказать мне, как решить эту проблему? Спасибо.

Answer 1

FlatList и ScrollView совместно используют один и тот же лог c, всякий раз, когда вы используете FlatList внутри ScrollView, он дублируется для решения этой проблемы, вы можете удалить FlatList и использовать карту следующим образом:

  {users.map((item, index) => {
        ...your logic
    }}

Надеюсь, что это помогает!