在React Native中使图像可滚动

时间:2018-09-26 18:35:27

标签: javascript react-native scrollview expo imagebackground

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

Super tall image (denoted by purple) and the hovering back button 超高图像(由紫色表示)和悬停的后退按钮

我的目标是能够垂直滚动以查看后退按钮停留在固定位置的其余图像(被视口剪切)。我在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>
        );
    }
}

使用上述实现,即使图像以全屏显示,我也无法根据需要滚动图像。在这方面的任何帮助都将不胜感激!

0 个答案:

没有答案