React Native，如何使滾動視圖加載最低全屏沒有滾動條，但隨着內容增長滾動

Question

我有一個ScrollView是有問題的，因爲我需要把一個底部邊框，所以我需要它加載最初的全屏，但是當添加<ErrorSection />組件時，能夠讓ScrollView自動增加高度。

它似乎不適用於flex: 1，所以我試圖明確聲明ScrollView的height和width，但這也會產生不可預知的結果。

這裏是我的滾動型電流代碼：

import React from 'react' 
import { StyleSheet, ScrollView, Dimensions } from 'react-native' 
import * as Animatable from 'react-native-animatable' 

const E1ScrollView = ({ children, animation, style, bottomBorder }) => { 
    const { container, E1bottomBorder } = styles 

    const { height, width } = Dimensions.get('window') 
    // const pxHeight = height * PixelRatio.get() 
    // const pxWidth = width * PixelRatio.get() 

    return (
     <ScrollView style={[container, style]}> 
      <Animatable.View 
       style={[{ height, width }, (bottomBorder) ? E1bottomBorder : null]} 
       animation={animation} 
       iterationCount={1}> 

       {children} 
      </Animatable.View> 
     </ScrollView> 
    ) 
} 

const styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     backgroundColor: '#F0F0F0', 
     flexDirection: 'column' 
    }, 
    E1bottomBorder: { 
     borderBottomWidth: 5, 
     borderColor: '#DD0426', 
    } 
}) 

export { E1ScrollView } 

Answer 1

我有很多的研究後解決了這個。這裏是我的滾動視圖組件功能齊全：

import React from 'react' 
import { StyleSheet, ScrollView } from 'react-native' 
import * as Animatable from 'react-native-animatable' 

const E1ScrollView = ({ children, animation, bottomBorder, style }) => { 
    const { container, E1bottomBorder } = styles 

    // the key is flexGrow: 1 on the ScrollView (and contentContainerStyle) 
    // The wrapped <View /> should be flex: 1 
    return (
     <ScrollView 
      contentContainerStyle={{ flexGrow: 1 }} 
      scrollEnabled> 

      <Animatable.View 
       style={[container, (bottomBorder) ? E1bottomBorder : null, style]} 
       animation={animation} 
       iterationCount={1}> 

       {children} 
      </Animatable.View> 
     </ScrollView> 
    ) 
} 

const styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     backgroundColor: '#F0F0F0', 
     flexDirection: 'column' 
    }, 
    E1bottomBorder: { 
     borderBottomWidth: 5, 
     borderColor: '#DD0426', 
    } 
}) 

export { E1ScrollView } 

如果你想品嚐它，只需導入到「共同」組件的任何屏幕上，您打算使用它，這樣做：

import { E1ScrollView } from '../common' 
// ... 
// Notice how you can overwrite styles by adding style={{ backgroundColor: 'red' }} to <E1ScrollView /> 
return (
    <E1ScrollView animation="fadeIn" bottomBorder> 
     <View style={{ flex: 0 }}><Text>test</Text></View> 
     <View style={{ flex: 0, flexDirection: 'column' }}> 
      <Text>test</Text> 
      <Text>test</Text> 
      <Text>test</Text> 
     </View> 
     <View style={{ flex: 1 }} /> 
     <View style={{ flex: 0 }}><Text>test</Text></View> 
    </E1ScrollView> 
) 

我想確保您知道的部分是您可以創建<CardSection />查看具有flex: 0或flex: 1樣式的元素，您將可以輕鬆地進行堆疊。然後，你只需要使用邊距和填充。

我在上面演示的<View style={{ flex: 1 }} />元素是一個關鍵的設計元素，需要注意的是，在我看來。我發現它在我的旅程中，它使填充區域很容易。

如果您的屏幕接收到添加DOM元素的道具，您的視圖將以預期的方式進行響應。