Как использовать PanResponder внутри горизонтального FlatList - PullRequest
Новая
       35

Как использовать PanResponder внутри горизонтального FlatList

0 голосов
/ 23 апреля 2019

Я хочу перетащить выбранный элемент из горизонтального FlatList и перетащить его в другую область экрана. Проблема заключается в том, что моя обертка FlatList должна иметь фиксированную высоту, и при попытке вытащить выбранный элемент из компонента FlatList переполняет его, и мой элемент скрывается.

Я попытался изменить zIndex и установить переполнение на видимое, но оно не работает должным образом, потому что настройка zIndex работает только с братьями и сестрами и пока что довольно глючная, переполнение: видимое никак не влияло на макет.

Вот скриншот:

http://joxi.ru/bmoLpPeU39qDx2

Вот мой код: 

import React from 'react';
import {
    SafeAreaView,
    View, 
    FlatList, 
    Text,
    StyleSheet,
    Animated,
    PanResponder
} from 'react-native';
import { v4 } from 'uuid';


export default class App extends React.PureComponent{

  state = {
    data: [
      { id: v4(), title: 'Lightcoral', hex: '#eb7474' },
      { id: v4(), title: 'Orchid', hex: '#eb74dc' },
      { id: v4(), title: 'Mediumpurple', hex: '#9a74eb' },
      { id: v4(), title: 'Mediumslateblue', hex: '#8274eb' },
      { id: v4(), title: 'Skyblue', hex: '#74b6eb' },
      { id: v4(), title: 'Paleturquoise', hex: '#93ece2' },
      { id: v4(), title: 'Palegreen', hex: '#93ecb6' },
      { id: v4(), title: 'Khaki', hex: '#d3ec93' }
    ]
  }

  _position = new Animated.ValueXY()

  _panResponder = PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderMove: (event, gesture) => {
        this._position.setValue({ x: gesture.dx, y: gesture.dy})
      },
      onPanResponderRelease: () => {}
    })


  _keyExtractor = (item) => item.id;


  _renderItem = ({item}) => {

    return (
      <Animated.View
        style={this._position.getLayout()}
        {...this._panResponder.panHandlers}  
      >
        <View style={[styles.itemBox, {backgroundColor: `${item.hex}`}]}>
            <Text>{item.title}</Text>
        </View>

      </Animated.View>
    )
  }



  render() {
    const { data } = this.state

    return (
      <SafeAreaView style={styles.safeArea}>
        <View style={styles.container}>


        <View style={styles.targetArea}>
          <Text>Drop HERE!!!</Text>
        </View>


        <View style={{ height: 80, borderColor: 'black', borderWidth: 2 }}>
            <FlatList
                data={data}
                keyExtractor={this._keyExtractor}
                renderItem={this._renderItem}
                horizontal={true}
            />
        </View>

        </View>
      </SafeAreaView>

    );
  }
}

const styles = StyleSheet.create({
  safeArea: {
    flex: 1
  },
  container: {
    flex: 1,
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  itemBox: {
    width: 80,
    height: 80,
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1,
    borderColor: '#fff'
  },
  targetArea: {
    height: 150, 
    width: 150, 
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1, 
    borderColor: '#eee',
    backgroundColor: '#F5FCFF',
    marginTop: 40
  }

});

Я хочу переместить выбранный элемент flatList по экрану и поместить его поверх любого другого элемента экрана , если бы я просто мог программно установить zIndex для каждого элемента - я был бы над луна, но, к сожалению, это не так просто. Пожалуйста, помогите мне, я очень отчаялся (((

...