Создание изображения с возможностью прокрутки в React Native - PullRequest
Новая
       60

Создание изображения с возможностью прокрутки в React Native

0 голосов
/ 26 сентября 2018

Я создаю приложение, использующее реагировать нативно (expo), и мне нужно показать очень высокое изображение внутри прокрутки, где кнопка «Назад» постоянно висит вверху.

Super tall image (denoted by purple) and the hovering back button Сверхвысокое изображение (обозначается фиолетовым цветом) и кнопка перемещения назад

Моя цель - иметь возможность прокрутки по вертикали, чтобы увидеть остальную часть изображения (обрезается с помощьюобласть просмотра), где кнопка возврата остается в фиксированном положении.Я использовал ImageBackground внутри ScrollView для размещения как изображения, так и кнопки «Назад». 

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>
        );
    }
}

В описанной выше реализации, даже несмотря на то, что изображение отображается в полноэкранном режиме, я не могу прокручивать изображение по желанию.Любая помощь в этом отношении очень ценится!

...