滚动视图以 { 位置:绝对} 重新捕捉到位

Question

由于我的表单上显示了许多图层并创建了透明效果，我需要将 ScrollView 放置在绝对位置;不幸的是，当添加 { 位置： '绝对' } 样式时，我的 ScrollView 会在我松开手指后恢复到顶部。我阅读了堆栈溢出上的所有相关线程，但无济于事。

下面是以下代码的屏幕截图：https://i.stack.imgur.com/TREZN.jpg

这是我使用的代码： 从"反应"导入反应，{ 组件 }; 从"反应本机"导入 { 视图、滚动视图、文本 };

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;

Answer 1

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

好的，秘诀是添加以下样式组件：(我必须弄清楚为什么 - 并发布它 - 稍后再复习我的 CSS 技能(

• 向父视图添加样式(位置：相对，弹性：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;

Answer 2

你只需要指定滚动视图的高度

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