React Native ScrollView 与单个子组件

Question

我想要一个全屏ScrollView，其中包含我的应用程序中Home 屏幕的所有内容。我面临的问题是当我为ScrollView 有两个子组件时它按预期工作（我添加了一个Text 组件只是为了尝试它），但如果我只有一个内容@ 987654325@我想要的。

<View style={style.content}> 的内容比屏幕尺寸高，所以它应该滚动。但是当我删除<Text style={{margin: 60, marginTop: 800}}>Here is some text</Text> 整个屏幕变白。

这是我听说的 ScrollView：

• 它需要一个有限的高度（但我应该有这个，因为所有内容当前都是静态的（没有动态数据）并且我的所有组件都有一个固定的高度）
• 您需要在 ScrollView 内的组件上使用 {flex: 1}（我在我的 Container 组件上设置了此样式）

这是我的 Home 组件：

import React, { Component } from "react";
import {
    StatusBar, StyleSheet, View, ScrollView, Text
} from "react-native";

import { LinearGradient } from "expo";
import MaterialCommunityIcon from "react-native-vector-icons/MaterialCommunityIcons"
import Color from "color";

import globalStyles from "../config/globalStyles";
import Container from "../components/Container/Container";
import Header from "../components/Header/Header";
import FullWidthImage from "../components/Images/FullWidthImage";
import MainFeedbackText from "../components/Text/MainFeedbackText";
import MainStatistics from "../components/Statistics/MainStatistics";
import Button from "../components/Buttons/Button"

export default class Home extends Component {
    render() {
        return (
            <ScrollView style={{borderColor:"red", borderWidth: 2}}>
                <Container>
                    <View style={style.content}>
                        <MainFeedbackText/>
                        <Button
                            text="START NEW WORKOUT"
                            textStyle={{fontSize: 24}}
                            buttonStyle={{
                                backgroundColor: globalStyles.colors.green,
                                paddingHorizontal: 20,
                            }}
                            icon={<MaterialCommunityIcon style={style.settings} name="dumbbell" color="white" size={30}/>}
                        />
                        <Button
                            text="My workouts"
                            textStyle={{fontSize: 24, paddingRight: 40}}
                            buttonStyle={{
                                backgroundColor: Color("black").fade(0.8),
                                paddingHorizontal: 20,
                                margin: 20
                            }}
                            icon={<MaterialCommunityIcon style={style.settings} name="format-list-bulleted" color="white" size={20}/>}
                        />
                        <MainStatistics/>
                    </View>

                    {/**TODO: ScrollView breaks when removing this line*/}
                    <Text style={{margin: 60, marginTop: 800}}>Here is some text</Text>

                    <StatusBar translucent={false}/>
                    <LinearGradient colors={["transparent", globalStyles.colors.dark]} style={style.gradient}>
                        <View style={style.image}>
                            <FullWidthImage requireSource={require("./lifting.jpg")}/>
                        </View>
                    </LinearGradient>
                    <Header/>
                </Container>
            </ScrollView>
        );
    }
}

const style = StyleSheet.create({
    image: {
        opacity: 0.3,
        zIndex: -1,
    },
    gradient: {
        position: "absolute",
        top: 0,
        zIndex: -1
    },
    content: {
        flex: 1,
        position: "absolute",
        top: 80,
        height: 4000,
    }
});

Answer 1

将contentContainerStyle={{ flex: 1 }} 设置为ScrollView 变为全屏。