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é
- J'ai essayé de tout sortir de l'écran
- J'ai aussi essayé de créer un nouvel écran à partir de zéro.
- 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.
- 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 
Après avoir glissé sur le carrousel 
Vous pouvez créer votre propre carrousel personnalisé. Le résultat final du carrousel ressemble à
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.
<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.