@Farazendasss

Почему код работает некорректно?

Помогите разобраться почему код работает некорректно ?
Два скрина ,к которым подключаются 2 разных слайдера. Между собой экраны не зависимы. Но слайдер на втором экране ,после 10 фоток начинает глючить.А на первом все нормально

PS: для простоты чтения убрал стили из примеров

первый экран и слайдер который подключается к нему.
//Первый экран к которому подключаю компонент со слайдером

import React, { Component } from 'react';
import { View } from 'react-native';
import SliderSpecific from '../components/slider-specific';



export default class SpecificCategoryScreen extends Component {

  //функция вызываеться по клику на слайдер. Переходим на экрна со вторым слайдером
  getViewPhoto = idx => {
    const { navigation} = this.props;
    navigation.navigate('ViewPhoto');
  };

  render() {
    return (
      <View style={styles.container}>
            <SliderSpecific getViewPhoto={this.getViewPhoto} />
      </View>
    );
  }
}
//-------------------------------------------------------------------------------
ПЕРВЫЙ СЛАЙДЕР

import React, {Component, PureComponent} from 'react';
import { View,TouchableWithoutFeedback } from 'react-native';
import Swiper from 'react-native-custom-swiper';
import FastImage from 'react-native-fast-image';
import {connect} from 'react-redux'

class Slider extends PureComponent {

  render() {
    const {item, getPhoto} = this.props;

    return (
        <TouchableWithoutFeedback style={styles.imageBox} onPress={getPhoto}>
            <FastImage
            style={styles.img}
            source={{uri: item}}/>
        </TouchableWithoutFeedback>
    );
  }
}

class SliderSpecific extends Component {

  shouldComponentUpdate(){
    return false
  }

  render() {
    const { getViewPhoto, photoArr} = this.props;
    return (
      <View>
        <Swiper
          swipeData={photoArr}
          showSwipeBtn={false}
          renderSwipeItem={(item, index) => (
            <Slider
              item={item}
              getPhoto={() => getViewPhoto()}
            />
          )}
        />

      </View>
    );
  }
}

const mapStateToProps = ({photoArr}) =>{
  return{photoArr}
}
const mapDispatchToProps = (dispatch) =>{
  return{}
}

export default connect(mapStateToProps, mapDispatchToProps)(SliderSpecific)


ВТОРОЙ ЭКРАН К КОТОРОМУ ПОДКЛЮЧАЕТСЯ СЛАЙДЕР
//------------------------------------------------------------------------------------

import React, {Component} from 'react';
import {
  View,
  StyleSheet,
  Image,
  TouchableOpacity,
  Button,
  ActivityIndicator,
} from 'react-native';
import {HeaderButtons} from 'react-navigation-header-buttons';
import {connect} from 'react-redux';
import FastImage from 'react-native-fast-image';
import SliderPhotoView from '../components/slider-photo-view';


 export default class ViewPhotoScreen extends Component {

  render() {
    return (
       <SliderPhotoView />
    );
  }
}

 //-----------------------------------------------------------------------------------
 СЛАЙДЕР КОТОРЫЙ ПОДКЛЮЧАЕТСЯ 

 import React, { Component, PureComponent, Fragment } from 'react';
import {View} from 'react-native';
import Swiper from 'react-native-custom-swiper';
import FastImage from 'react-native-fast-image';
import { connect } from 'react-redux';

class Sliders extends PureComponent {


  render() {
    const { item } = this.props;
    return (
          <FastImage
            style={styles.img}
            source={{ uri: item }} />
    );
  }
}

class SliderPhotoView extends Component {
  shouldComponentUpdate() {
    return false
  }
  render() {
    console.log('slider-photo-view - reducer')
    const { photoArr } = this.props;
    return (
      <View style={styles.sliderContainer}>
        <Swiper
          swipeData={photoArr}
          showSwipeBtn={false}
          renderSwipeItem={(item, index) => (
          <Sliders
            item={item} />
          )}
        />
      </View>
    );
  }
}

const mapStateToProps = ({ photoArr }) => {
  return { photoArr }
}
const mapDispatchToProps = (dispatch) => {
  return {}
}

export default connect(mapStateToProps, mapDispatchToProps)(SliderPhotoView)
  • Вопрос задан
  • 49 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы