Reduzir a lacuna entre carrossel e paginação - reagem-nativa-snap-carrossel

votos
0

Eu sou novo com reagem-nativa, para brincar um pouco com componentes e bibliotecas. Eu estou tentando fazer entender layout geral e opções de estilo.

Estou tendo problemas para tentar reduzir a diferença entre o carrossel e a paginação. Eu tentei usar o posicionamento absoluto e margem negativa, mas isso não parece ajudar.

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

digite

Publicado 03/12/2019 em 00:02
fonte usuário
Em outras línguas...                            


1 respostas

Reduzir a lacuna entre carrossel e paginação - reagem-nativa-snap-carrossel

votos
0

Eu sou novo com reagem-nativa, para brincar um pouco com componentes e bibliotecas. Eu estou tentando fazer entender layout geral e opções de estilo.

Estou tendo problemas para tentar reduzir a diferença entre o carrossel e a paginação. Eu tentei usar o posicionamento absoluto e margem negativa, mas isso não parece ajudar.

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

digite descrição da imagem aqui

Respondeu 03/12/2019 em 00:02
fonte usuário

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