为什么scrollview会填满屏幕底部的空白？

问题描述 投票：0回答：1

当我将 

ScrollView
与 
SafeAreaView
结合使用时，我一直遇到问题。它在底部留下一些间隙。我还尝试从 SafeAreaView 外部移动 ScrollView（从 SafeAreaView 中删除 
flex
、
flexGrow
后），但 SafeAreaView 占用了太多顶部空间（参见第二张图片）。我怎样才能让ScrollView占据整个空白区域？请记住，解释间隙的
Text
将被删除。

import React from "react";
import { ScrollView, Text, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

const ScrollViewPage = (props) => {
  return (
    <>
      <SafeAreaView
        style={{
          backgroundColor: "#EFF0F3",
          flex: 1,
          flexGrow: 1,
          borderWidth: 3,
          borderColor: "red",
        }}
      >
        <ScrollView
          showsVerticalScrollIndicator={false}
          contentContainerStyle={{
            flexGrow: 2,
            flex: 1,
            borderWidth: 2,
            borderColor: "blue",
            height: "100%",
            width: "100%",
            alignItems: "center",
            justifyContent: "center",
          }}
        >
          <View
            style={{
              borderWidth: 1,
              flex: 1,

              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <Text>Hello</Text>
          </View>
        </ScrollView>
        <Text>Why doesn't the scrollview fill here?</Text>
      </SafeAreaView>
    </>
  );
};

第二张图：

react-native scrollview safeareaview
1个回答
0
投票

要解决这个问题，想象一下纯 html。您的 Scrollview 可能被包裹在某种 div 中。例如

<html>
<head>
</head>
<body>
 
  <!-- ======= Header would typically go here ======= -->
  <header>
      <!-- ======= NavBar would typically go here ======= -->
      <navbar>
      </navbar>
  <header/>
  <!-- ======= Now the Content and your ScrollView would go here======= -->
  <!-- ===When React renders your code looks like this probably======= -->
  <div>
   <ScrollView>
   </ScrollView>
  </div>
  <!-- ===This is going to make your ScrollView take the shape of parent======= -->
</body>

</html>

在 React 中，当您调用组件时，有时它会自动包装并采用其父组件的大小。在这种情况下，ScrollViewPAge 将是父级。您需要设置该容器的大小。你能分享一下源代码渲染后的样子吗？

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.