React-Native-Snap-Carouselは正しくレンダリングされません

問題の要約

私はReact-Native-Snap-Carouselを使用しています。それは正しくレンダリングされません。スワイプした後にのみレンダリングされ、スクリーンが最初にレンダリングされたときにそれをレンダリングする必要があります。 Reactナビゲーションで、BottomTabNavigatorまたはマイスタック・ナビゲーターの初期ルートに画面が割り当てられている場合は、カルーセルは完全にレンダリングされます。スタックナビゲータの他のルートにまったく同じ画面を割り当てると、スワイプするまでカルーセルをレンダリングしません。

私のスタックナビゲータの2番目のルートとしてカルーセルで画面を使用する必要があり、それを正しく動作させる方法を理解することはできません。

私が試したもの

私はその他のすべてをスクリーンから取り出すことを試みました
私はまた、最初から新しい画面を作成しようとしました。
私はスタックナビゲータの最初のルートとして画面をテストし、それは完全に機能しますが、私はまだカルーセルがスクリーンがロードされたときにレンダリングすることができません。
私はまたクラスベースのReactコンポーネントに切り替え、それが役立っていません。

コード

Carouselを使ったコンポーネント

_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;
_

Carouselを使ったコンポーネントのスタイル

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

反応ナビゲーション構成

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

問題の概要

スクリーンロード時に、Carouselはレンダリングされていません

カルーセルにスワイプした後

javascriptreactjsreact-nativereact-native-snap-carousel

2019/09/04bzlight

あなたはあなた自身のカスタムカルーセルを作成することができます。カルーセルの最終結果はこんな感じです。

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

これはループカルーセルの後ろに使用される主要なロジックです。ここでは、最後にリストの最初の項目を再度プッシュしています。

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

さらに参照するために、提供されたリンクを通過します。

https://goel-mohit56.medium.com/custom-horizontal-auto-scroll-looped-carousel-using-scrollview-42baa5262F95

2021/01/27Mohit Goel

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

私は問題がここにあると思います静的な高さと幅を与えます。高さと幅を動的に計算してから表示します。ここで動的に、Divceの高さと幅を計算してから計算することを意味します。

2019/09/05Rishav Kumar