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

Question

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

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

这是我当前的 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

经过大量研究，我已经解决了这个问题。这是我的滚动视图组件功能齐全：

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 }

如果您想试用它，只需将 "common" 组件导入您打算使用它的任何屏幕并执行以下操作：

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 style={{ flex: 1 }} /> 元素是一个需要注意的关键设计元素。我在旅途中的某个地方发现了它，它使填充区域变得非常轻松。

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

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

React Native, How to make a ScrollView load minimum fullscreen without scrollbar but then scroll as content grows

css

scrollview

reactjs

react-native