ScrollView в ReactNative не заполняет оставшееся пространство

Question

В моем приложении есть экран с промежуточным контентом. Этот контент слишком длинный для Iphone 5-8, но только один экран для Iphone 8S-XS Max.

Чтобы исправить это, я поставил простой ScrollView, который работает для контента, который слишком длинный, но для больших размеров экрана оставляет серый фон, как показано на скриншоте ниже:

Вот код:

<View style={{flex: 1, width: '100%',justifyContent: 'center', alignItems: 'center', height: 900,}}>
    <ScrollView style={{width: '100%', flex: 1, height: 900}}>
        <ImageBackground source={require('../../assets/images/background.png')} style={{width: '100%', flex: 1, justifyContent: 'flex-start', alignItems: 'center', backgroundColor: 'background-color: rgba(0, 0, 0, 0.5)',}}>
            {/*...Unimportant view code...*/}
        </ImageBackground>
    </ScrollView>
</View>

Как вы можете видеть, я применил flex: 1 ко всем важным контейнерам, и я попытался установить ограниченную высоту (например, height: 900) для всех вышеперечисленных контейнеров, но пока безрезультатно.

Как сделать так, чтобы содержимое, содержащееся в просмотре прокрутки, занимало всю высоту экрана независимо от устройства?

Answer 1

Так что я действительно нашел ответ в этой средней статье прямо здесь:
https://medium.com/@peterpme/taming-react-natives-scrollview-with-flex-144e6ff76c08 И ответ на ваш <ScrollView> компонент, присвойте следующее свойство:

contentContainerStyle={{flexGrow: 1, justifyContent: 'space-between'}}

И это сработало для меня как шарм!