首页 文章

ScrollView使用{position：absolute}快速回到原位

提问于
浏览 次
2

由于我的表单上显示了很多层并创建了透明效果，我需要将ScrollView放在绝对位置;不幸的是，当添加{position：'absolute'}样式时，我的ScrollView在我松开手指后快速回到顶部 . 我在stackoverflow上读取所有相关的线程无济于事 .

这是以下代码的屏幕截图：http://imgur.com/a/fd4ad

这是我正在使用的代码：从'react'导入React，;从'react-native'导入{View，ScrollView，Text};

class HomeTest extends Component {
    render() {
        const { headerTextStyle, homeView, scrollViewStyle, textStyle } = styles;

        return (
            <View>
                <ScrollView style={scrollViewStyle} contentContainerStyle={homeView}>
                    <Text style={textStyle}>I'd love to figure out why this is not working.........................</Text>
                </ScrollView>
                <Text style={headerTextStyle}>Header</Text> 
            </View>
        );
    }
}

const styles = {
    headerTextStyle: {
        fontSize: 40,
        alignSelf: 'center'
    },
    scrollViewStyle: {
        position: 'absolute',
        paddingTop: 60,
        marginTop: 0 
    },
    homeView: {
        alignItems: 'center',
        justifyContent: 'center'
    },
    textStyle: {
        fontSize: 96
    },
};

export default HomeTest;
react-native

2 回答

  • 0

    在GitHub上找到解决方案：https://github.com/facebook/react-native/issues/5438

    好吧，秘诀是添加以下样式组件:(我必须弄清楚原因 - 然后发布 - 稍后再刷新我的CSS技巧）

    • 将样式添加到父视图（position：relative，flex：1）

    • 向滚动视图添加新样式属性（顶部，底部，左侧，右侧）

    这是更新的代码：

    import React, { Component } from 'react';
import { View, ScrollView, Text } from 'react-native';

class HomeTest extends Component {
    render() {
        const { headerTextStyle, homeView, scrollViewStyle, textStyle, mainView } = styles;

        return (
            <View style={mainView}>
                <ScrollView style={scrollViewStyle} contentContainerStyle={homeView}>
                    <Text style={textStyle}>I'd love to figure out why this is not working.........................</Text>
                </ScrollView>
                <Text style={headerTextStyle}>Header</Text> 
            </View>
        );
    }
}

const styles = {
    headerTextStyle: {
        fontSize: 40,
        alignSelf: 'center'
    },
    scrollViewStyle: {
        position: 'absolute',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        paddingTop: 60
    },
    homeView: {
        alignItems: 'center',
        justifyContent: 'center'
    },
    textStyle: {
        fontSize: 96
    },
    mainView: {
        flex: 1,
        position: 'relative'
    }
};

export default HomeTest;
    回复于
  • 2

    您只需要指定scrollView的 height

    scrollViewStyle: {
    position: 'absolute',
    paddingTop: 60,
    marginTop: 0 ,
    height: 300 //    <----
},
    回复于

相关问题