Помогите разобраться почему код работает некорректно ?
Два скрина ,к которым подключаются 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)
