代码之家 › 专栏 › 技术社区 › agm1984

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

scrollview react-native reactjs css

agm1984 · 技术社区 · 7 年前

我有一个 ScrollView 这是有问题的,因为我需要在其上放置一个底部边框,所以我需要它最初以全屏方式加载,但当 <ErrorSection /> 组件已添加。

它似乎不适用于 flex: 1 ,因此我尝试显式声明 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 }

1 回复 | 直到 7 年前

agm1984 7 年前

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元素的道具,您的视图将以预期的方式响应。