Question

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

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

以下是我所听说过的ScrollView：

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

这是我的主页组件：

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 }}的{{1}}设置为全屏。

使用单个子组件实现Native ScrollView

1 个答案: