React Native， 如何使 ScrollView 在没有滚动条的情况下加载最小全屏，但随着内容的增长而滚动

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>
)

我想确保您知道的部分是，您可以创建具有flex: 0或flex: 1风格的<CardSection /> View元素，您将获得轻松的堆叠。然后，您只需要使用边距和填充。

在我看来，我上面演示的<View style={{ flex: 1 }} />元素是一个需要注意的关键设计元素。我在旅途中的某个地方找到了它，它使填充区域变得毫不费力。

如果您的屏幕收到添加 DOM 元素的道具，您的视图将以预期的方式响应。