1

我正在使用 react native (expo) 创建一个应用程序，我需要在滚动视图中显示一个非常高的图像，其中后退按钮始终悬停在顶部。

超高图像（用紫色表示）和悬停的返回按钮 超高图像（用紫色表示）和悬停的返回按钮

我的目标是能够垂直滚动以查看图像的其余部分（由视口剪辑），其中后退按钮保持在固定位置。我在 ScrollView 中使用 ImageBackground 来托管图像和后退按钮。

const styles = StyleSheet.create({
    screen: {
        flex: 1,
        backgroundColor: "transparent"
    },
    scrollView: {
        flex: 1
    },
    imageBackground: {
        flex: 1
    },
    container: {
        flex: 1,
        flexDirection: "column",
        justifyContent: "space-between",
        paddingHorizontal: 16,
        paddingVertical: scaleVertical(24),
        backgroundColor: "transparent"
    },
    backButtonView: {
        paddingTop: 10,
        paddingBottom: 10,
        paddingLeft: 0,
        paddingRight: 10
    },
    backButtonIcon: {
        height: 470 * 0.085,
        width: 470 * 0.085,
        resizeMode: "contain"
    }
});

export class ImageScreenComponent extends React.Component {
    static navigationOptions = {
        header: null
    };

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View
                behavior="position"
                style={styles.screen}
                onStartShouldSetResponder={e => true}
                onResponderRelease={e => Keyboard.dismiss()}
            >
                <StatusBar hidden={true} />
                <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollView}>
                    <ImageBackground
                        source={this.props.backgroundImage}
                        resizeMode="center"
                        style={styles.imageBackground}
                    >
                        <View style={styles.container}>
                            <TouchableOpacity style={styles.backButtonView} onPress={this.props._goBackFunc}>
                                <Image style={styles.backButtonIcon} source={backIcon} />
                            </TouchableOpacity>
                        </View>
                    </ImageBackground>
                </ScrollView>
            </View>
        );
    }
}

通过上述实现，即使图像全屏显示，我也无法根据需要滚动图像。非常感谢这方面的任何帮助！

4

0 回答 0