web-dev-qa-db-fra.com

réact-natif-snap-carrousel ne rend pas correctement

Résumé du problème

J'utilise React-Native-Carrousel et je ne range pas correctement. Il ne fait que rendre après avoir été glissé et j'ai besoin de rendu lorsque l'écran rend initialement. Lorsque j'ai l'écran affecté à la route initiale de mon bottabnavigator ou à la route initiale de mon navigateur de pile en React navigation, le carrousel rend parfaitement le même écran à l'autre Route dans un navigateur de pile, puis il ne rend pas le carrousel jusqu'à ce que je me balai.

J'ai besoin d'utiliser l'écran avec le carrousel comme deuxième route de mon navigateur de pile et je ne peux pas comprendre comment le faire fonctionner correctement.

Ce que j'ai essayé

  1. J'ai essayé de tout sortir de l'écran
  2. J'ai aussi essayé de créer un nouvel écran à partir de zéro.
  3. J'ai testé l'écran comme itinéraire initial dans le navigateur de pile et cela fonctionne parfaitement, mais je ne peux toujours pas obtenir le carrousel de rendu lorsque l'écran charge.
  4. J'ai également essayé de passer à un composant de réact basé sur une classe et qui n'a pas aidé.

code

Composant avec carrousel

import React, { useState } from "react";
import { View, Text } from "react-native";
import { useDispatch } from "react-redux";
import styles from "./StatSelectorStartComp.style";
import HeaderText from "~/app/Components/HeaderText/HeaderText";
import Carousel from "react-native-snap-carousel";
import LargeButton from "~/app/Components/Buttons/LargeButton/LargeButton";
import NavigationService from "~/app/services/NavigationService";
import { saveStartCompStatCategory } from "~/app/Redux/actions/dailyCompActions";

const StatSelectorStartComp = ({}) => {
  const dispatch = useDispatch();
  const ENTRIES1 = ["Kills", "Wins", "K/D", "Win %"];
  const [selectedStat, setSelectedStat] = useState(ENTRIES1[0]);

  const _renderItem = ({ item, index }) => {
    return (
      <View style={styles.slide}>
        <Text style={styles.compSelectStatCarousel}>{item}</Text>
      </View>
    );
  };

  return (
    <View style={styles.container}>
      <View style={styles.headerTextView}>
        <HeaderText header={"Configure Competition"} />
      </View>
      <Text style={styles.h5Secondary}> Which stat will you track?</Text>
      <View style={styles.selectStatView}>
        <Text style={styles.mediumGreyedOut}>Most {selectedStat} Wins</Text>
        <Carousel
          ref={c => {
            _carousel = c;
          }}
          data={ENTRIES1}
          renderItem={_renderItem}
          sliderWidth={375}
          itemWidth={100}
          onSnapToItem={index => {
            setSelectedStat(ENTRIES1[index]);
          }}
        />
      </View>
      <View style={styles.buttonView}>
        <LargeButton
          onPress={() => {
            dispatch(saveStartCompStatCategory(selectedStat));
            NavigationService.navigate("CompAddFriends");
          }}
          buttonText="Add Friends"
        />
      </View>
    </View>
  );
};

export default StatSelectorStartComp;

Styles pour composant avec carrousel

import { StyleSheet } from "react-native";
import { backgroundColor } from "~/app/Constants";
import {
  h5Secondary,
  mediumGreyedOut,
  compSelectStatCarousel
} from "~/app/FontConstants";

export default StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "space-between",
    backgroundColor
  },
  headerTextView: {
    flex: 1
  },
  h5Secondary,
  selectStatView: {
    flex: 3
  },
  mediumGreyedOut,
  compSelectStatCarousel,
  buttonView: {
    flex: 2
  }
});

réagit la configuration de la navigation

const StartCompStack = createStackNavigator({
  StartFriendsComp: {
    screen: StartFriendsComp
  },
  StatSelectorStartComp: {
    screen: CarouselTest
  },
  CompAddFriends: {
    screen: CompAddFriends
  },
  FinalCompScreen: {
    screen: FinalCompScreen
  }
});

const ProfileStack = createStackNavigator({
  Profile: {
    screen: ProfileScreen
  },
  Settings: {
    screen: SettingsScreen
  }
});

const BottomTabNav = createBottomTabNavigator(
  {
    Home: {
      screen: HomeScreen
    },
    Competitions: {
      screen: Competitions
    },
    StartComp: {
      screen: StartCompStack,
      navigationOptions: () => ({
        tabBarVisible: false
      })
    },
    CompScreen: {
      screen: CompScreen
    },
    Friends: {
      screen: FriendsDrawer
    },
    Profile: {
      screen: ProfileStack
    },
    FacebookFriendsList
  },
  {
    tabBarComponent: CustomTabNav,
    initialRouteName: "Home" 
  }
);

images décrivant le problème

Lorsque l'écran charge, carrousel n'est pas rendu When screen loads, carousel not rendered

Après avoir glissé sur le carrousel After swiping on carousel

10
bzlight

Vous pouvez créer votre propre carrousel personnalisé. Le résultat final du carrousel ressemble à

enter image description here

     goToNextPage = () => {
    const childlenth = this.getCustomData().length;
    selectedIndex = selectedIndex + 1;
    this.clearTimer();
    if (selectedIndex === childlenth) {
        this.scrollRef.current.scrollTo({ offset: 0, animated: false, nofix: true });
        selectedIndex = 1;
    }
    this.scrollRef.current.scrollTo({
        animated: true,
        x: this.props.childWidth * selectedIndex,
    });
    this.setUpTimer();
}

// pushing 1st element at last
 getCustomData() {
    const {data} = this.props;
    const finaldata = [];
    finaldata.Push(...data);
    finaldata.Push(data[0]);
    return finaldata;
}

C'est la principale logique utilisée derrière le carrousel en boucle. Ici, nous appuyons enfin le premier élément de nouveau dans la liste, puis lorsque le défilement atteint en dernier position, nous effectuons la vision de Scroll View pour faire défiler la première position de premier et dernier élément sont identiques maintenant et nous faisons défiler jusqu'à la première position avec animation comme celle-ci.

this.scrollRef.current.scrollTo({ offset: 0, animated: false, nofix: true });

Pour plus de référence, passez à travers le lien fourni.

https://goel-mohit56.medium.com/custom-horizontal-auto-scroll-looped-Carousel-utilisateur-scrollview-42baa5262f95

0
Mohit Goel
<Carousel
          ref={c => {
            _carousel = c;
          }}
          data={ENTRIES1}
          renderItem={_renderItem}
          sliderWidth={375}
          itemWidth={100}
          onSnapToItem={index => {
            setSelectedStat(ENTRIES1[index]);
          }}
        />
      </

Je pense que le problème réside ici donnant une hauteur et une largeur statiques. Essayez de calculer la hauteur et la largeur de manière dynamique, puis le montrer. Dynamiquement, signifie ici le calcul de la hauteur et de la largeur de la déviation, puis de les calculer.

0
Rishav Kumar