Строки Flatlist перекрывают элементы других строк при преобразовании элемента - PullRequest
Новая
       63

Строки Flatlist перекрывают элементы других строк при преобразовании элемента

0 голосов
/ 27 апреля 2020

У меня есть плоский список, который содержит некоторый список изображений (Inside touchableopacity), и на каждом фокусе изображения я масштабирую изображение до 1,3. Здесь следующая строка всегда перекрывает изображение первой строки при масштабировании. 

         <FlatList
          style={[styles.flatlist, styles.outline]}
          decelerationRate="fast"
          data={this.props.posters}
          contentContainerStyle={{
            flexDirection: 'column',
            paddingTop: perfectSize(50),
            paddingLeft: perfectSize(40),
            paddingRight: perfectSize(40),
            paddingBottom: perfectSize(50),
          }}
          numColumns={7}
          horizontal={false}
          ref={ref => (this.scroller = ref)}              
          scrollEventThrottle={400}
          renderItem={({item, index}) => (
            <Poster
              key={index + 1}
              defaultFocus={this.state.posterNum}
              onFocus={this.handleAccessible}
              handleClick={this._onPosterClick}
              onLayout={this.handleScroller}
              data={item}
              index={index + 1}
            />
          )}
          keyExtractor={item => item.id}
        />

Код компонента плаката ниже 

   <TouchableHighlight
    ref={itemRef => {
      this.refers[`${each.id}_${i}_pos`] = itemRef;
    }}        
    accessible={true}
    hasTVPreferredFocus={defaultFocus}
    style={[styles.poster_box_small]}
    onFocus={() => this._onPosterFocus(`${each.id}_${i}`, i)}
    onPress={() => this._onPosterClick(each, i)}
    onBlur={() => this._onPosterBlur(`${each.id}_${i}`)}>
    <LinearGradient
      colors={['#BF55DE', '#080808', '#00BDE6']}
      start={{x: 0, y: 1}}
      end={{x: 1, y: 0}}
      ref={itemRef => (this.refers[`${each.id}_${i}_lg`] = itemRef)}>
      {/* Poster :: Background Image */}
      <ImageBackground
        style={styles.poster_banner}
        resizeMode="cover"
        source={{uri: each.image}}>
        {/* Bottom Left Flag :: Collected/UnCollected score */}
        {this.getScoreUI(each)}
        {/* Center Dots :: Show only during file load */}
        <View style={styles.poster_center_view}>
          <Text style={styles.poster_center_circle}>. . .</Text>
        </View>
        {/* Top Right Flag :: TV Collection */}
        {this.getTVFlag(each)}
      </ImageBackground>
    </LinearGradient>
  </TouchableHighlight>

onFocus и onBlur, я просто меняю класс 

// Poster Focus :: scale it and show border
_onPosterFocus = (key, i) => {
  this.props.onFocus && this.props.onFocus(i);
  this.refers[`${key}_pos`].setNativeProps({
    style: styles.poster_box_large,
  });
  this.refers[`${key}_lg`].setNativeProps({
    style: styles.poster_gradient_large,
  });
};

// Poster Blur :: Remove scaling and remove border
_onPosterBlur = key => {
  this.refers[`${key}_pos`].setNativeProps({style: styles.poster_box_small});
  this.refers[`${key}_lg`].setNativeProps({
    style: styles.poster_gradient_small,
  });
};

Css компонента плаката 

poster_gradient_large: {
    padding: perfectSize(3),
},
poster_gradient_small: {
    padding: perfectSize(0),
},
poster_box_small: {
    width: perfectSize(235),
    height: perfectSize(334),
    margin: perfectSize(6),
    transform: null,
    zIndex: -1,
},
poster_box_large: {
    width: perfectSize(235),
    height: perfectSize(334),
    margin: perfectSize(6),
    transform: [{scale: (1.1, 1.3)}],
    zIndex: 1,
},
poster_banner: {
    width: '100%',
    height: '100%',
    backgroundColor: 'rgba(51,50,59,1)',
    zIndex: 1,
},

Проблема в том, что следующая строка в плоском списке перекрывает масштабированное изображение, но верхние строки не перекрываются. Это происходит для всех изображений.

enter image description here

...