Réduire écart entre le carrousel et la pagination - réagir natif composant logiciel enfichable carrousel

voix
0

Je suis nouveau avec natif réagir de façon juste à jouer avec des composants et des bibliothèques. Je suis en train ne comprennent présentation générale et les options de style.

Je vais avoir du mal à essayer de réduire l'écart entre le carrousel et la mise en page. Je l'ai essayé d'utiliser le positionnement absolu et de la marge négative, mais qui ne semble pas aider.

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

entrez

Créé 03/12/2019 à 00:02
source utilisateur
Dans d'autres langues...                            


1 réponses

Réduire écart entre le carrousel et la pagination - réagir natif composant logiciel enfichable carrousel

voix
0

Je suis nouveau avec natif réagir de façon juste à jouer avec des composants et des bibliothèques. Je suis en train ne comprennent présentation générale et les options de style.

Je vais avoir du mal à essayer de réduire l'écart entre le carrousel et la mise en page. Je l'ai essayé d'utiliser le positionnement absolu et de la marge négative, mais qui ne semble pas aider.

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

entrez la description d'image ici

Créé 03/12/2019 à 00:02
source utilisateur

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