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

Question

我有一个ScrollView这是有问题的，因为我需要在它上面放置一个底部边框，所以我需要它最初作为全屏加载，但是当 <ErrorSection /> 时能够让 ScrollView 自动增加高度。组件已添加。

它似乎不适用于 flex: 1 ，所以我试图显式声明 height和width ScrollView 的，但这也会产生不可预测的结果。

这是我当前的 ScrollView 代码:

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

经过大量研究，我已经解决了这个问题。这是我的 ScrollView 组件，功能齐全:

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 元素的 props，您的 View 将以预期的方式响应。