ReactNative 中的 ScrollView 未填充剩余空間

Question

我的應用程序中有一個屏幕，其中包含“介於兩者之間”的內容。 這個內容對於 Iphone 5-8 來說太長了，但對於 Iphone 8S-XS Max 來說只有一個屏幕。

為了解決這個問題，我添加了一個簡單的ScrollView ，它適用於太長的內容，但對於較大的屏幕尺寸，它會留下灰色背景，如下面的屏幕截圖所示：

這是代碼：

<View style={{flex: 1, width: '100%',justifyContent: 'center', alignItems: 'center', height: 900,}}>
    <ScrollView style={{width: '100%', flex: 1, height: 900}}>
        <ImageBackground source={require('../../assets/images/background.png')} style={{width: '100%', flex: 1, justifyContent: 'flex-start', alignItems: 'center', backgroundColor: 'background-color: rgba(0, 0, 0, 0.5)',}}>
            {/*...Unimportant view code...*/}
        </ImageBackground>
    </ScrollView>
</View>

如您所見，我已將flex: 1應用於所有重要容器，並且嘗試在所有上述容器上設置有界高度（例如height: 900 ），但仍然無濟於事。

無論設備如何，如何使滾動視圖中包含的內容占據整個屏幕高度？

Answer 1

因此，我實際上在這里的這篇中等文章中找到了答案：
https://medium.com/@peterpme/taming-react-natives-scrollview-with-flex-144e6ff76c08答案是，在您的<ScrollView>組件上，分配以下屬性：

contentContainerStyle={{flexGrow: 1, justifyContent: 'space-between'}}

它對我來說就像一種魅力！

Answer 2

如果您使用的是SafeAreaView ，請注意它的height和edges屬性值。

如果您在此頁面上有導航欄，請從edges數組中刪除“頂部”。

<SafeAreaView edges={['top', 'left', 'right']} style={{ height: '100%' }}>
  {/* header */}
  <View style={{ height: 100 }}>
    <Text style={{ fontSize: 32, color: 'red' }}>
      Hi there I am a header
    </Text>
  </View>

  {/* the holly ScrollView */}
  <ScrollView style={{ borderWidth: 1, borderColor: 'deeppink' }}>
    <Text style={{ fontSize: 32, borderWidth: 1, borderColor: 'yellow' }}>
      {' '}
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, ad
      architecto. Sunt ex dolore modi laborum voluptatibus recusandae
      reprehenderit quo dolores ipsam officia rerum nihil eaque eligendi,
      quae suscipit assumenda.{' '}
    </Text>
    <Text style={{ fontSize: 32, borderWidth: 1, borderColor: 'yellow' }}>
      {' '}
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, ad
      architecto. Sunt ex dolore modi laborum voluptatibus recusandae
      reprehenderit quo dolores ipsam officia rerum nihil eaque eligendi,
      quae suscipit assumenda.{' '}
    </Text>
    <Text style={{ fontSize: 32, borderWidth: 1, borderColor: 'yellow' }}>
      {' '}
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, ad
      architecto. Sunt ex dolore modi laborum voluptatibus recusandae
      reprehenderit quo dolores ipsam officia rerum nihil eaque eligendi,
      quae suscipit assumenda.{' '}
    </Text>
    <Text style={{ fontSize: 32, borderWidth: 1, borderColor: 'yellow' }}>
      {' '}
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, ad
      architecto. Sunt ex dolore modi laborum voluptatibus recusandae
      reprehenderit quo dolores ipsam officia rerum nihil eaque eligendi,
      quae suscipit assumenda.{' '}
    </Text>
    <Text style={{ fontSize: 32, borderWidth: 1, borderColor: 'yellow' }}>
      {' '}
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, ad
      architecto. Sunt ex dolore modi laborum voluptatibus recusandae
      reprehenderit quo dolores ipsam officia rerum nihil eaque eligendi,
      quae suscipit assumenda.{' '}
    </Text>
    <Text style={{ fontSize: 32, borderWidth: 1, borderColor: 'yellow' }}>
      {' '}
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, ad
      architecto. Sunt ex dolore modi laborum voluptatibus recusandae
      reprehenderit quo dolores ipsam officia rerum nihil eaque eligendi,
      quae suscipit assumenda.{' '}
    </Text>
  </ScrollView>

  {/* footer */}
  <View style={{ height: 100 }}>
    <Text style={{ fontSize: 32, color: 'blue' }}>
      Hi there I am a footer
    </Text>
  </View>
</SafeAreaView>

這是一個工作演示。

https://snack.expo.dev/@shrekuu/scrollview-filling-remaining-space