如何使 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
    },
})