React-Native-Snap-Karussell wird nicht richtig gerendert

Zusammenfassung des Problems

Ich verwende React-Native-Snap-Karussell und es wird nicht richtig gerendert. Es wird erst gerendert, nachdem es gewischt wurde, und ich muss es rendern, wenn der Bildschirm anfänglich gerendert wird. Wenn ich den Bildschirm der Anfangsroute meines BottomTabNavigator oder der Anfangsroute in meinem Stack Navigator in React Navigation zugewiesen habe, wird das Karussell perfekt gerendert. Wenn ich einer anderen Route in einem Stack Navigator genau denselben Bildschirm zuordne, wird das Karussell erst gerendert, wenn ich darüber wische.

Ich muss den Bildschirm mit dem Karussell als zweite Route in meinem Stack Navigator verwenden und kann nicht herausfinden, wie es richtig funktioniert.

Was ich versucht habe

1. Ich habe versucht, alles andere vom Bildschirm zu entfernen
2. Ich habe auch versucht, einen neuen Bildschirm von Grund auf neu zu erstellen.
3. Ich habe den Bildschirm als erste Route im Stack Navigator getestet und er funktioniert einwandfrei, aber ich kann das Karussell beim Laden des Bildschirms immer noch nicht rendern.
4. Ich habe auch versucht, zu einer klassenbasierten Reaktionskomponente zu wechseln, und das hat nicht geholfen.

Code

Komponente mit Karussell

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;

Stile für Komponenten mit Karussell

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

Navigationskonfiguration reagieren

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" 
  }
);

Bilder, die das Problem umreißen

Beim Laden des Bildschirms wird das Karussell nicht gerendert

Nach dem Wischen auf Karussell