如何使 ScrollView 组件的大小与 React Native 中的屏幕大小成比例？

Question

I'm working with React Native and I have a ScrollView with a small, finite number of Components (hence why I'm not using FlatList ).

As best as I can tell, I need to provide a height to the components for them to be big enough to render in the ScrollView and hardcoding the height with just pixels seems to work.

Screenshot of the height as 250 pixels.

I've also just found that you can use a percentage for height/width . But when I try doing this for my components within my ScrollView , the components all become diminutive.

Screenshot of height as 25% not working.

I get that the components might behave differently in a ScrollView as opposed to in a normal View , so I was wondering if we have to specify the exact number of pixels for each Component or if there's a better way to do this.

import React, {Component} from 'react';
import {SafeAreaView, ScrollView, StyleSheet, View} from 'react-native';

const styles = StyleSheet.create({
    item: {
        height: 250,
        // height: '25%' <--- Doesn't work
        margin: 2,
        borderRadius: 15
    },
})

const Item = ({color}) => (
    <View style={[styles.item,
        {backgroundColor: color}]}/>
  );

class App extends Component {

    render = () => {
        return (
            <SafeAreaView style={{flex: 1}}>
                <ScrollView  style={{flex: 1}}>
                    <Item color={'chocolate'} />
                    <Item color={'darkseagreen'} />
                    <Item color={'khaki'} />
                    <Item color={'palegreen'} />
                    <Item color={'paleturquoise'} />
                    <Item color={'aqua'} />
                </ScrollView>
            </SafeAreaView>
        )
    }
}

export default App;

Answer 1

you better use Dimensions from React Native

import {SafeAreaView, ScrollView, StyleSheet, View, Dimensions} from 'react-native';


const styles = StyleSheet.create({
    item: {
        height: Dimensions.get('window').height * 0.25,
        margin: 2,
        borderRadius: 15
    },
})