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

Question

我正在使用 React Native 並且我有一個ScrollView其中包含少量有限的組件（因此我不使用FlatList ）。

盡我所知，我需要為組件提供一個height ，使它們足夠大以在ScrollView呈現，並且僅使用像素對height進行硬編碼似乎可行。

高度為 250 像素的屏幕截圖。

我還剛剛發現您可以使用百分比表示 height/width 。 但是當我嘗試為我的ScrollView中的組件執行此操作時，這些組件都變得很小。

高度為 25% 的屏幕截圖不起作用。

我知道組件在ScrollView行為可能與在普通View ，所以我想知道我們是否必須為每個 Component 指定確切的像素數，或者是否有更好的方法來做到這一點。

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

你最好使用 React Native 的Dimensions

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
    },
})