React Native Snap Carousel 功能组件问题

问题描述

我将此小吃用作实现我自己的轮播组件的模板。此模板使用类组件，我将其转换为功能组件

https://snack.expo.io/@bd-arc/react-native-snap-carousel-%7C-example-with-custom-interpolations

我将此添加到我的项目中，并且我相信在渲染 Carousel 时发生了一些错误，但我无法分辨。它渲染 - 但并非所有组件都在渲染。我只是将 Carousel 本身更改为功能组件。问题是 Carousel 下方没有显示 - 如果我添加多个 VideoCarousel，也只会显示第一个。

我的代码在下面

App.js

import React from 'react';
import { View } from 'react-native';

import Header from './components/header';
import VideoCarousel from './components/videoCarousel';

import tailwind from 'tailwind-rn';

const App = () => {
  return (
    <View style={tailwind('flex pt-12 items-center bg-gray-300 h-full')}>
      <Header />
      <VideoCarousel />
      <VideoCarousel />
    </View>
  )
};

export default App;

VideoCarousel.js

import React,{ useState } from 'react';
import { Text,View,Dimensions,StyleSheet,Alert } from 'react-native';

import Carousel from 'react-native-snap-carousel'; // Version can be specified in package.json

import { scrollInterpolator,animatedStyles } from './../utils/animations';

const SLIDER_WIDTH = Dimensions.get('window').width;
const ITEM_WIDTH = Math.round(SLIDER_WIDTH * 0.7);
const ITEM_HEIGHT = Math.round(ITEM_WIDTH * 3 / 4);

const DATA = [];
for (let i = 0; i < 10; i++) {
  DATA.push(i)
}

const VideoCarousel = () => {

  const [index,setIndex] = useState(0);

  _renderItem = (index) => {
    return (
      <View style={styles.itemContainer}>
        <Text style={styles.itemLabel}>{`Item ${index.index}`}</Text>
      </View>
    );
  }

  return (
    <View>
      <Carousel
        data={DATA}
        renderItem={this._renderItem}
        sliderWidth={SLIDER_WIDTH}
        itemWidth={ITEM_WIDTH}
        containerCustomStyle={styles.carouselContainer}
        inactiveSlideShift={0}
        onSnapToItem={(index) => setIndex(index)}
        scrollInterpolator={scrollInterpolator}
        slideInterpolatedStyle={animatedStyles}
        useScrollView={true}          
      />
      <Text style={styles.counter}>
        Test
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  carouselContainer: {
    marginTop: 50
  },itemContainer: {
    width: ITEM_WIDTH,height: ITEM_HEIGHT,alignItems: 'center',justifyContent: 'center',backgroundColor: 'dodgerblue'
  },itemLabel: {
    color: 'white',fontSize: 24
  },counter: {
    marginTop: 400,fontSize: 30,fontWeight: 'bold',textAlign: 'center',backgroundColor: "black",}
});

export default VideoCarousel;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）