标签: react-native-snap-carousel

我正在尝试让我的 React Snap Carousel 加载到所需的索引上。目前，当轮播加载时，它会加载第一个索引，而不是我用 FirstItem 告诉它的索引。当我刷新屏幕或保存在代码编辑器中时，轮播会捕捉到我所指的第一个项目（索引）。下面是我的代码。我还看到了很多关于此的卡片，它们指向https://github.com/archriss/react-native-snap-carousel/blob/master/doc/KNOWN_ISSUES.md#unreliable-first-item。尽管我一生都不知道如何让它正常工作。我很感激任何帮助。谢谢。

  <Carousel
    layout={'default'}
    ref={c => {
    this._carousel = c;
    }}
    useScrollView={true}
    data={this.getDaysArray() ? this.getDaysArray() : []}
    renderItem={this.renderItem.bind(this)}
    sliderWidth={Platform.OS === 'ios' ? 375 : 392}
    itemWidth={Platform.OS === 'ios' ? 310 : 332}
    firstItem={22}
    initialScrollIndex={23}
    onLayout={() => {
      this._carousel.snapToItem(22);
      }}
  />

我试图让轮播加载左对齐，但一旦我开始滑动，项目就会居中（有点像 Facebook 上的“建议的组”或“你可能认识的人”轮播）。到目前为止，我已经得到了轮播，但一切都保持对齐。有什么办法可以让这个功能与 snap carousel 插件一起使用吗？这是我的代码：

...
<Carousel
    containerCustomStyle={{paddingLeft: 20, marginTop: 15}}
    data={reviews}
    renderItem={renderCarousel}
    sliderWidth={Dimensions.get('window').width}
    itemWidth={Dimensions.get('window').width/1.5}
    activeSlideAlignment="start"
/>
...

问题总结

我正在使用react-native-snap-carousel，并且渲染不正确。它仅在被刷过后才呈现，我需要在屏幕最初呈现时呈现。当我将屏幕分配给我的BottomTabNavigator的初始路径或React Navigation中我的Stack Navigator中的初始路径时，轮播会完美呈现。当我在Stack Navigator中将完全相同的屏幕分配给任何其他路线时，只有在我滑动轮播时，它才会渲染轮播。

我需要使用带有轮播的屏幕作为我的Stack Navigator中的第二条路线，但我不知道如何使其正常工作。

我尝试过的

1. 我尝试将所有其他内容都移出屏幕
2. 我也尝试过从头开始创建新屏幕。
3. 我已经在Stack Navigator中将屏幕作为初始路径进行了测试，并且效果很好，但是当屏幕加载时，仍然无法使轮播呈现。
4. 我也尝试过切换到基于类的react组件，但没有帮助。

码

旋转木马组件

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 …

我一直在尝试从包含多个视频和图像的滑块播放单个视频。我使用和尝试的内容如下。 1. react-native-video, 2. react-native-snap-carousel

如何暂停和播放水平轮播中包裹的视频以及垂直 FlatList Feeds 中的视频

这是我的旋转木马：

<View style={styles.sliderImgView}>
     <Carousel
       ref={(c) => { this._carousel = c; }}
       data={chordData.images}
       firstItem={0}
       autoplay={autoPlay}
       layout={layout}
       loop={loop}
       renderItem={this._renderItem}
       onSnapToItem={(ind) => this.setState({ activeSlide: ind })}
       loopClonesPerSide={bannersDataLength}
       sliderWidth={SCREEN_WIDTH}
       itemWidth={SCREEN_WIDTH} />
</View>

我的 _renderItem 在这里：

if (item.mediaType === "image") {
return (
    <View style={[styles.sliderImgView, GlobalStyles.ajCenter]} key={index}>
        <Image source={{ uri: item.imgUrl }} resizeMode={"cover"} style={[styles.sliderImageStyle]} />
    </View>
)
} else {
    return (
        <View style={[styles.sliderImgView, GlobalStyles.ajCenter]} key={index}>
            <Video
                source={{ uri: item.imgUrl }}  // Can be a URL …

我想使用react-native-snap-carousel，但是当我尝试init时出现错误:(

例子：

import Carousel from 'react-native-snap-carousel';

export class MyCarousel extends Component {

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

render () {
    return (
        <Carousel
          ref={(c) => { this._carousel = c; }}
          data={this.state.entries}
          renderItem={this._renderItem}
          sliderWidth={sliderWidth}
          itemWidth={itemWidth}
        />
    );
}}

我的代码：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Carousel from 'react-native-snap-carousel';

export default class App extends React.Component {
 _renderItem ({item, index}) {
   return (
      <View style={styles.slide}>
          <Text …