Verminder afstand tussen carousel en paginering - terug-natief-snap-carousel

stemmen
0

Ik ben nieuw met reageren anderstalige dus gewoon spelen met componenten en bibliotheken. Ik probeer begrijp algemene lay-out en styling opties.

Ik heb problemen met het proberen om de kloof tussen de carrousel en de paginering te verminderen. Ik heb geprobeerd met behulp van absolute positionering en negatieve marge, maar dat leek niet te helpen.

render() {
    return (
        <React.Fragment>
            <SafeAreaView forceInset={{ top: 'always' }} style={styles.app}>
                <View style={styles.header}>
                    <Header />
                </View>
                <View style={styles.container}>
                    <View style={styles.carousel}>
                        <Text style={styles.pageTitle}>Featured</Text>
                        <Carousel
                            containerCustomStyle={{
                                flexGrow: 0,
                                paddingTop: 16,
                                paddingBottom: 48,
                            }}
                            sliderWidth={screenWidth}
                            itemWidth={screenWidth - 60}
                            data={this.state.posts}
                            renderItem={this._renderItem}
                            hasParallaxImages={true}
                            onSnapToItem={(index) => this.setState({ activeSlide: index }) }
                        />
                        { this.pagination }
                    </View>
                </View>
            </SafeAreaView>
       </React.Fragment>
   );
}

const styles = StyleSheet.create({
    app: {
        flex: 1,
        backgroundColor: 'white',
    },
    container: {
        flex: 1,
    },
    header: {
        flex: 0.1,
    },
    carousel: {
        flex: 0.5,
    },
    item: {
        width: screenWidth - 60,
        height: screenHeight / 4,
        shadowColor: #000,
        shadowOffset: {
            width: 0,
            height: 16,
        },
        shadowOpacity: 0.50,
        shadowRadius: 10,
        elevation: 16,
    },
    imageContainer: {
        flex: 1,
        marginBottom: Platform.select({ ios: 0, android: 1 }),
        backgroundColor: 'white',
        borderRadius: 25,
    },
    image: {
        ...StyleSheet.absoluteFillObject,
        resizeMode: 'cover',
    },
});

voer

De vraag is gesteld op 03/12/2019 om 00:02
bron van user
In andere talen...                            


1 antwoorden

Verminder afstand tussen carousel en paginering - terug-natief-snap-carousel

stemmen
0

Ik ben nieuw met reageren anderstalige dus gewoon spelen met componenten en bibliotheken. Ik probeer begrijp algemene lay-out en styling opties.

Ik heb problemen met het proberen om de kloof tussen de carrousel en de paginering te verminderen. Ik heb geprobeerd met behulp van absolute positionering en negatieve marge, maar dat leek niet te helpen.

render() {
    return (
        <React.Fragment>
            <SafeAreaView forceInset={{ top: 'always' }} style={styles.app}>
                <View style={styles.header}>
                    <Header />
                </View>
                <View style={styles.container}>
                    <View style={styles.carousel}>
                        <Text style={styles.pageTitle}>Featured</Text>
                        <Carousel
                            containerCustomStyle={{
                                flexGrow: 0,
                                paddingTop: 16,
                                paddingBottom: 48,
                            }}
                            sliderWidth={screenWidth}
                            itemWidth={screenWidth - 60}
                            data={this.state.posts}
                            renderItem={this._renderItem}
                            hasParallaxImages={true}
                            onSnapToItem={(index) => this.setState({ activeSlide: index }) }
                        />
                        { this.pagination }
                    </View>
                </View>
            </SafeAreaView>
       </React.Fragment>
   );
}

const styles = StyleSheet.create({
    app: {
        flex: 1,
        backgroundColor: 'white',
    },
    container: {
        flex: 1,
    },
    header: {
        flex: 0.1,
    },
    carousel: {
        flex: 0.5,
    },
    item: {
        width: screenWidth - 60,
        height: screenHeight / 4,
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 16,
        },
        shadowOpacity: 0.50,
        shadowRadius: 10,
        elevation: 16,
    },
    imageContainer: {
        flex: 1,
        marginBottom: Platform.select({ ios: 0, android: 1 }),
        backgroundColor: 'white',
        borderRadius: 25,
    },
    image: {
        ...StyleSheet.absoluteFillObject,
        resizeMode: 'cover',
    },
});

voer image beschrijving hier

antwoordde op 03/12/2019 om 00:02
bron van user

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more