Как я могу иметь представление, вертикально заполняющее пространство ScrollView в реагирующем?

Question

У меня есть:

            <ScrollView style={{ position: 'absolute', top: 0, height: '100%', paddingTop: 250, left: 0, right: 0, marginBottom: -50, backgroundColor: 'red', flex: 1 }}>
                <View style={{ backgroundColor: customTheme.colors.background, paddingHorizontal: 5 }}>
                    <Title>{conversation?.title}</Title>
                    {participants.length > 0 && <List.Item
                        title={<ParticipantAvatarRow participants={participants} />}
                        description={`${participants.length} people joining`}
                        left={props => <FontAwesome {...props} style={{ marginVertical: 5 }} name='group' size={24} />}
                    />}

Но View не заполняет вертикальное пространство ScrollView. Я хочу, чтобы он был не меньше, чем ScrollView, но, возможно, больше, если контент растягивает его.

Answer 1

Я не вижу большого смысла заполнять ScrollView по вертикали компонентом View, который со временем будет растягиваться больше, если есть больше контента для отображения, просто наличие нескольких компонентов внутри ScrollView должно в теории сделать точно что вы ожидаете, нет необходимости в упаковке View. Если только вы не пытаетесь достичь чего-то особенного, что я еще не рассмотрел.

С учетом сказанного, если вам действительно нужно иметь эту упаковку View с динамикой c минимальная высота, я бы предложил использовать значение height из компонента react-native Dimensions следующим образом:

import { Dimensions } from 'react-native';
var { width, height } = Dimensions.get('window');

Это даст вам именно ту высоту устройства, которую вы можете использовать, чтобы растянуть View. Если ваш ScrollView не совпадает с высотой устройства (например, при наличии верхних / нижних панелей навигации и вставок в безопасной области, вы можете использовать высоту этих компонентов и вычесть из значения height устройства перед передачей его в View стиль компонента.

Это позволит убедиться, что View, отображаемый внутри ScrollView, имеет значение Dynami c и жестко запрограммированное height, которое подходит для всех устройств.